CSS Backgrounds and Borders: Using multiple backgrounds

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

<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-repeat和background-position）适用于相应的背景。所以第一个列出的值background-repeat适用于第一个（最前面的）背景，等等。