多个背景 | CSS Background and Borders: Using CSS multiple backgrounds

CSS Background and Borders: Using CSS multiple backgrounds

您可以将多个背景应用于元素。这些在上面提供的第一个背景和在后面列出的最后一个背景上分层叠加。只有最后一个背景可以包含背景颜色。

指定多个背景很容易：

.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适用于第一个（最前面的）背景，等等。

另见

• 使用CSS梯度（CSS gradient）