多个背景的应用

你可以应用多个背景到元素，这些背景在你添加的第一个背景的上方和最后一个背景的下方分层叠加，只有最后的背景可以包含背景颜色。

指定多个背景很简单：

.myclass {
  background: background1, background 2, ..., backgroundN;
}

除了background-color之外，你可以用简写background 属性和它的各个属性来做到这一点。也就是说，以下背景属性可以被指定为一个列表，每个背景一个： 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(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/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;
}

结论

（如果在CodePen中图像没有出现，点击CSS模块的TIdy按钮）

正如您在这里看到的，Firefox徽标（在background-image中首先列出）位于气泡图形正上方，接着是位于所有先前“images”下方的渐变（最后列出）。每个后续的子属性（background-repeat和background-position）适用于相应的背景。因此，background-repeat的第一个列出的值适用于第一个（最前面的）背景，依此类推。

另见

Using CSS gradients