Множественные фоны
К элементам можно применить несколько фонов. Они накладываются друг на друга: фон, заданный первым, станет верхним, а заданный последним — нижним. Только последний фон может включать цвет фона.
Задавать множественные фоны
легко:
.myclass {
background:
background1,
background2,
/* …, */ backgroundN;
}
Вы можете сделать это сокращённым свойством background
и отдельными свойствами кроме background-color
. Таким образом, следующие свойства могут быть определены в виде списка по одному на фон: background
, background-attachment
, background-clip
, background-image
, background-origin
, background-position
, background-repeat
, background-size
.
Пример
В этом примере заданы три фона: логотип Firefox, изображение пузырей и линейный градиент:
HTML
<div class="multi-bg-example"></div>
CSS
.multi-bg-example {
width: 100%;
height: 400px;
background-image: url(firefox.png), url(bubbles.png),
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
bottom right,
left,
right;
}
Результат
Как вы можете видеть, логотип Firefox (первый в списке background-image
) расположен сверху, далее идёт фон с пузырями и в самом низу градиент (указанный последним). Каждое последующее под-свойство (background-repeat
и background-position
) применяется к соответствующим фонам. Например, первое значение свойства background-repeat
применяется к первому фону и т.д.