使用多个背景

您可以将多个背景应用于元素。这些背景彼此叠加，您提供的第一个背景在最上面，最后一个背景在最下面。只有最后一个背景可以包含背景颜色。

指定多个背景很容易

css
.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

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, 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 的第一个列出的值应用于第一个（最前面的）背景，依此类推。

另请参阅