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

Как этим воспользоваться?

Раньше, если нужно было более одного фонового изображения, приходилось менять структуру HTML и добавлять больше классов, чтобы добиться нужного результата с помощью CSS, и код CSS выглядел примерно так:

.overcast1 {
        background-image: url("images/overcast.png");
        background-position: 150px 25px;
}
.rainbow {
        background-image: url("images/rainbow.png");
        background-position: 200px 10px;
}
.overcast2 {
        background-image: url("images/overcast.png");
        background-position: 250px 25px;
}
.sunny {
        background-image: url("images/sunny.png");
        background-position: 100px 10px;
}

Код выше явно избыточен. В CSS3 этот код может быть объединен в одно свойство фонового изображения, следующим образом:

.weather {
  width: 500px;
  height: 280px;
  margin: 50px auto;
  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;
  background-repeat: no-repeat;
}

В этом коде добавлены те же четыре изображения с разными соответствующими координатами, что дает ошеломительный результат:

Демонстрация работы

Добавление эффекта анимации 

Более того, можно сделать результат еще более сногсшибательным, добавив анимации CSS3. Чтобы код был проще, запишем только стандартный синтаксис W3C, но не забывайте, что браузерам, таким как Internet Explorer, Firefox, Opera, Chrome и Safari, нужны соответствующие приставки производителей, чтобы анимации работали.

Рекомендованное чтение: Создание улучшенной бегущей строки с использованием анимаций CSS3

@keyframes weather { 
  0% {
    background-position: 120px 25px, 200px 10px, 280px 25px, 80px 10px;
  }
  100% {
    background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px;
  }
}

После того, как заданы ключевые кадры, нужно только добавить анимацию с названием ключевого кадра нужному селектору, в этом случае классу .weather:

.weather {
  animation: weather 5s;
}

Это все, теперь можно посмотреть эффект анимации в действии по ссылке ниже, или скачать исходный код для дальнейшего ознакомления:

Демонстрация работы – Скачать исходный код

Поддержка браузерами 

Согласно информации с сайта CanIUse.com, множественные фоновые изображения CSS3 поддерживаются всеми современными версиями браузеров, включая браузеры Internet Explorer от версии 9, Firefox от версии 3,6, Opera от версии 11,5 и т. д. Так что это свойство можно и нужно активно применять уже сейчас.

Дополнительные источники

• Использование множественных фоновых изображений CSS – MDN
• Фоновые изображения CSS3 – W3.org

Автор урока Thoriq Firdaus

Перевод — Дежурка

Смотрите также:

• Создание скошенных вкладок с использованием трехмерных трансформаций CSS3
• Создание интересного выпадающего меню с использованием CSS3
• Создание вкладок с использованием только CSS3