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

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

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

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

css

.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

html

<div class="multi_bg_example"></div>

CSS

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 применяется к первому фону, и т.д.

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