Как использовать несколько фонов

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

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

.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;
}

При помощи CSS мы просто последовательно описали наши изображения, которые наложатся друг на друга.
Более того мы можем накладывать поверх этого всего анимацию, которая также описывается при помощи 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 {
  animation: weather 5s;}

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



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

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