Как использовать несколько изображений для фона

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

Реальный пример уведомления находится здесь:

Посмотреть примерСкачать

Как использовать несколько изображений для фона?

Раньше, чтобы вставить несколько изображений на фон, приходилось в HTML странице прописывать несколько элементов и соответствующие им классы. Как на примере ниже:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.style1 {
    background-image: url("images/image.png");
    background-position: 150px 25px;
}
.style2 {
    background-image: url("images/image.png");
    background-position: 200px 10px;
}
.style3 {
    background-image: url("images/image.png");
    background-position: 250px 25px;
}
.style4 {
    background-image: url("images/image.png");
    background-position: 100px 10px;	
}

Но с возможностями CSS3 данный код можно сократить, объединив все изображения в одно свойство background-image:

1
2
3
4
5
6
7
8
9
10
11
12

.weather {
    text-align: center;
    width: 100%;
    height: 100%;
    background-image: 
        url("images/overcast.png"), 
        url("images/rainbow.png"),
        url("images/overcast.png"),
        url("images/sunny.png");
    background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px, 0 0;
    background-repeat: no-repeat;
}

И результатом выполнения данного кода является изображение ниже:

Поддержка браузеров.

Данную возможность CSS3 поддерживают браузеры IE9+, Firefox 3.6+.

Вывод

Очень удобная функция, с помощью которой без лишней разметки можно сделать несколько фоновых изображений и расположить их по своему усмотрению.

Успехов!

Источник: http://www.hongkiat.com/blog/show-n-hide-notification-bar/