Как сделать фоновый рисунок в html: Как добавить фоновый рисунок на веб-страницу?

Как добавить фоновое изображение с помощью Bootstrap

Надежные ответы на вопросы разработчиков

Grokking the Behavioral Interview

Многих кандидатов отклоняют или понижают на технических собеседованиях из-за плохой успеваемости в поведенческих или культурных интервью. Пройдите собеседование с помощью этого бесплатного курса, где вы будете практиковаться, уверенно отвечая на поведенческие вопросы интервью.

Свойство background image задает изображение, используемое в качестве фона элемента. Фоновое изображение — отличный способ добавить индивидуальности и стиля веб-страницам. С помощью Bootstrap мы можем легко добавить фоновое изображение, которое меняется в зависимости от ширины страницы. Крайне практично использовать Bootstrap в качестве библиотеки.

В этом ответе вы узнаете, как добавить фоновое изображение с помощью JavaScript.

Пример кода 1

Расшифровка кода

• Строка 7: Создан родительский элемент has-bg-img .

• Строка 8: Здесь компонент bg-cover добавляется к классу bg-img , оформленному фоновым изображением.

• Строки 9–10: Эти строки содержат основной текст страницы с компонентом Bootstrap под названием текстовый центр .

Фоновое изображение в приведенном выше примере автоматически адаптирует область элемента, используя background-size: cover .

Режим наложения «Умножение»

Цвет фона умножается на элемент и заменяется, в результате чего конечный цвет становится таким же темным, как и фон. Чтобы использовать режим наложения Multiple, добавьте класс .bg-blend-multiply к изображению .has-bg-img .

Пример кода 2

Расшифровка кода

• Строка 6: Класс has-bg-img создается с фиолетовым цветом фона и смешивается с многокомпонентным компонентом Bootstrap.

• Строка 7:

  Класс bg-img оформлен фоновым изображением и цветом, дополнен шириной и высотой.

• Строка 8: Эта строка содержит основной текст страницы в HTML h5 текст.

Как видно из приведенного выше кода, смесь компонентов Bootstrap добавляется к классу .has-bg-img , благодаря чему цвет становится таким же темным, как фон.

Режим наложения наложения

Режим наложения умножает и экранирует содержимое в зависимости от цвета фона. Добавьте класс .bg-blend-overlay к классу .has-bg-img , чтобы использовать режим наложения с наложением.

Пример кода 3

Расшифровка кода

• Строка 5: Класс has-bg-img создается с фиолетовым цветом фона и смешивается с компонентом наложения Bootstrap.

• Строка 6: Класс bg-img имеет фоновое изображение и цвет, дополненный шириной и высотой.

• Строка 7:

  Эта строка содержит основной текст страницы в формате HTML h5 .

В приведенном выше примере компонент Bootstrap blend-overlay добавляется к классу has-bg-img , тем самым делая содержимое зависимым от уже определенного цвета фона bg-primary .

Режим смешивания экрана

Режим смешивания экрана также умножает фон, а затем содержимое обрабатывает результат, тем самым делая результирующее содержимое ярче, чем цвет фона. Чтобы использовать режим наложения экрана, добавьте .bg-blend-screen class to .has-bg-img .

Пример кода 4

Расшифровка кода

• Строка 5: Класс has-bg-img создается с фиолетовым цветом фона и смешивается с компонентом смешивания экрана Bootstrap.

• Строка 6: Здесь класс bg-img оформлен фоновым изображением и цветом.