Это учебное пособие продемонстрирует, как использовать фоновые изображения с CSS. Итак, начнем!
Как использовать несколько фоновых изображений с помощью CSS?
CSS « фон ” — это сокращенное свойство, которое содержит свойства background, background-attachment, clip, image, repeat, origin, size и position. Свойство background можно использовать для указания URL-адресов нескольких изображений. Затем эти изображения позиционируются и устанавливаются соответствующим образом.
Давайте возьмем пример, в котором один элемент div содержит только одно изображение в качестве логотипа веб-страницы, а второй содержит три изображения.
Пример: добавление нескольких фоновых изображений с помощью CSS
В HTML добавьте элемент div для логотипа и укажите имя класса. Например, мы назвали его « логотип ». Второй div использует несколько изображений, поэтому мы назвали его « несколько изображений ». Однако вы можете указать имя класса в соответствии с вашими предпочтениями.
HTML
< див сорт '=' 'логотип' >< / див >< див сорт '=' 'несколько изображений' >< / див >
В следующем разделе мы настроим изображения с помощью свойства фона CSS.
Стиль «логотип» div
.лого {ширина : 100% ;
высота : 50 пикселей ;
набивка : 5 пикселей ;
допуск : 5 пикселей ;
размер фона : 100 пикселей ;
фоновый повтор : неповторяющийся ;
изображение на заднем плане : URL ( изображения/linux-logo.png ) ;
}
Элемент div с классом « логотип ” применяется со следующими свойствами:
- “ ширина » используется для установки ширины элемента в « 100% ».
- “ высота ” используется для установки высоты элемента в “ 50 пикселей ».
- “ набивка ” свойство используется для установки “ 5 пикселей ” пространство вокруг указанного содержимого элемента.
- “ допуск » используется для установки « 5 пикселей ” пространство вокруг элемента.
- “ размер фона » устанавливает размер фонового изображения элемента как « 100 пикселей ».
- “ фоновый повтор ' со значением ' неповторяющийся ” отображает фон только один раз.
- “ изображение на заднем плане ” используется для указания URL-адреса изображения.
Стиль div «несколько изображений»
.multiple-images {ширина : 90% ;
высота : 45vh ;
допуск : 1 пиксель авто ;
набивка : 20 пикселей ;
размер фона : 150 пикселей ;
фоновый цвет : RGB ( 157 , 154 , 151 ) ;
изображение на заднем плане : URL ( изображения/офис.png ) , URL ( изображения/html.png ) , URL ( изображения/ноутбук.png ) ;
фоновый повтор : неповторяющийся , неповторяющийся , неповторяющийся ;
фоновое положение : левый , центр , верно ;
}
Теперь стилизуйте другой контейнер следующим образом:
- “ фоновый цвет ” определяет цвет фона элемента.
- “ изображение на заднем плане ” указывает несколько URL-адресов изображений.
- “ фоновый повтор Свойство устанавливает значения для изображений в последовательности изображений, указанных в свойстве background-image. Оба изображения настроены как неповторяющиеся, что означает, что они будут отображаться в браузере только один раз.
- “ фоновое положение » регулирует положение изображения в последовательности изображений, заданной свойством background-image. Первое изображение будет установлено слева, второе — в центре, а третье — справа.
Предоставив приведенный выше код, результат в браузере будет выглядеть следующим образом:
Таким образом, мы можем настроить положение нескольких изображений с помощью CSS.
Заключение
Чтобы сделать приложение интересным и интерактивным, разработчики используют разные изображения и цвета. Мы можем установить несколько изображений со свойствами фона CSS, такими как background-position, background-repeat, background-size и другими. Это руководство продемонстрировало использование нескольких фоновых изображений с примерами CSS.