Това учебно ръководство ще демонстрира как да използвате фонови изображения с CSS. И така, да започваме!
Как да използвам множество фонови изображения с CSS?
CSS “ заден план ” свойство е съкратено свойство, което съдържа свойствата фон, фоново прикачване, клип, изображение, повторение, произход, размер и позиция. Свойството background може да се използва за указване на URL адресите на множество изображения. След това тези изображения се позиционират и настройват по съответния начин.
Да вземем пример, в който един елемент div съдържа само едно изображение като лого на уеб страницата, докато вторият съдържа три изображения.
Пример: Добавяне на множество фонови изображения с CSS
В HTML добавете div елемент за логото и посочете името на класа. Например, нарекохме го „ лого ”. Вторият div използва множество изображения, затова го нарекохме „ множество изображения ”. Можете обаче да посочите името на класа според вашите предпочитания.
HTML
< див клас = 'лого' >< / див >< див клас = 'множество изображения' >< / див >
В следващия раздел ще коригираме изображенията с помощта на свойството CSS background.
Стил „лого“ div
.лого {ширина : 100% ;
височина : 50px ;
подплата : 5px ;
марж : 5px ;
размер на фона : 100 пиксела ;
фоново повторение : не-повтаряне ;
фоново изображение : URL адрес ( изображения/linux-logo.png ) ;
}
Елементът div с класа „ лого ” се прилага със следните свойства:
- “ ширина ” се използва за задаване на ширината на елемента на „ 100% ”.
- “ височина ” се използва за задаване на височината на елемента на „ 50px ”.
- “ подплата ” се използва за настройка на „ 5px ” интервал около указаното съдържание на елемента.
- “ марж ” се използва за настройка на „ 5px ” пространство около елемента.
- “ размер на фона ” свойството задава размера на фоновото изображение на елемента като „ 100 пиксела ”.
- “ фоново повторение ' със стойността ' не-повтаряне ” показва фона само веднъж.
- “ фоново изображение ” Свойството се използва за указване на URL адреса на изображението.
Стил „множество изображения“ div
.множество изображения {ширина : 90% ;
височина : 45vh ;
марж : 1px Автоматичен ;
подплата : 20px ;
размер на фона : 150 пиксела ;
Цвят на фона : rgb ( 157 , 154 , 151 ) ;
фоново изображение : URL адрес ( изображения/офис.png ) , URL адрес ( изображения/html.png ) , URL адрес ( изображения/лаптоп.png ) ;
фоново повторение : не-повтаряне , не-повтаряне , не-повтаряне ;
позиция на фона : наляво , център , точно ;
}
Сега стилизирайте другия контейнер, както следва:
- “ Цвят на фона ” указва цвета на фона на елемента.
- “ фоново изображение ” свойството указва множество URL адреси на изображения.
- “ фоново повторение ” Свойството задава стойности за изображенията в последователност от изображения, посочени в свойството background-image. И двете изображения са зададени като неповтарящи се, което означава, че ще се показват в браузъра само веднъж.
- “ позиция на фона ” коригира позицията на изображението в последователността от изображения, определени от свойството background-image. Първото изображение ще бъде поставено от лявата страна, второто в центъра и третото ще бъде поставено от дясната страна.
Чрез предоставяне на предоставения по-горе код, резултатът в браузъра ще изглежда така:
По този начин можем да коригираме позицията на множество изображения с CSS.
Заключение
За да направят приложението забавно и интерактивно, разработчиците използват различни изображения и цветове. Можем да зададем множество изображения с CSS свойства на фона, като фонова позиция, фоново повторение, фонов размер и други. Това ръководство демонстрира използването на множество фонови изображения с CSS примери.