Показать Меню
falbar Множественное задание фонов CSS3

Множественное задание фонов элементу при помощи CSS3

Множественное задание фонов CSS3

Задавая фон элементу, довольно часто хочется использовать одновременно несколько картинок. Раньше чтобы это сделать, необходимо было прописывать обертки и у каждой из них свой фон. В результате этого образовалась определенная вложенность, что делало структуру документа запутанной и неудобной для дальнейшей работы. Новая возможность CSS3 решает эту задачу на ура!

Всё довольно просто. Для того чтобы задать несколько фонов, нам теперь нужно их перечислить через запятую.

background-image: url(fon-1.png), url(fon.png);

Несколько фонов CSS3

Принцип наложения простой, а именно, нижней картинкой будет та, что прописана последней в свойстве и т.д. Это была полная запись, так же работает и сокращённая.

Для каждой картинки можно прописать свои индивидуальные параметры. Единственное исключение, которое приведёт к ошибке, это задание цвета. Задавать его стоит только нижнему фону, в другом случае свойство перестанет работать.

background: url(fon-1.png) no-repeat right top,
			url(fon-1.png) no-repeat center top,
			url(fon-1.png) no-repeat left top,
			url(fon.jpg) no-repeat;

Несколько фонов CSS3 №2

В сокращённой форме мы прописали каждой картинке свой набор параметров. Так - же мы можем это сделать и в полной форме записи, прописывается соответственно картинкам.

background-image: url(fon-1.png),url(fon-1.png), url(fon-1.png), url(fon.jpg);
background-position: 100% 100%, 55% 75%, 65% 25%, 0% 0%;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

Несколько фонов CSS3 №3

Конечно, это работает во всех современных браузерах без проблем, что касается ie, то начиная с 9-ой версии. Если свойство не поддерживается, то можно прописать один из фонов отдельно. В этом случае отобразится один из них.

background: url(fon.jpg) no-repeat right top;
background: url(fon-1.png) no-repeat right top,
			url(fon-1.png) no-repeat center top,
			url(fon-1.png) no-repeat left top,
			url(fon.jpg) no-repeat;

Вот так просто можно задать несколько фонов элементу воспользовавшись CSS3.

Подписаться на обновления

Комментариев еще не оставлено