Использование нескольких фонов

Вы можете применить несколько фонов к элементам. Они накладываются друг на друга, при этом первый указанный фон будет сверху, а последний — снизу. Только последний фон может содержать цвет фона.

Указание нескольких фонов просто:

.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, rgb(30 75 115 / 100%), rgb(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 применяется к первому (самоналоженному) фону и так далее.

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds