Лого SiteHere.ru

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

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

Понятно, что с помощью 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/

2 комментария к записи
  • Ника

    Сначала не поняла, что это совмещение нескольких изображений.. Интересно и здорово.. но  почему бы не создать одно изображение вместо трех? 

     
    • Юрий Немец

      Здравствуйте, Ника!

      Если бы это касалось маленьких изображений (например, иконок), то это было бы оправдано (необходимо было бы создать спрайт), но в данном случае быстрее загрузятся отдельные изображения, так как браузеры параллельно загружают несколько файлов с ресурсами.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *