Множественные фоны

Краткое описание

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

Задать множественные фоны легко:

.myclass {
  background: background1, background 2, ..., 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;
  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}

Результат

(If image does not appear in CodePen, click the TIdy button in the CSS section)

Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идёт градиент и в самом низу фон с пузырями. Каждое последующее под-свойство (background-repeat и background-position) применяется к соответствующим фонам. Например первое значение свойства background-repeat применяется к первому фону, и т.д.

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