使用多个背景
你可以应用多个背景到元素。这些图层彼此叠加，第一个提供的背景位于最上层，最后一个提供的背景位于最下层。只有最后一个背景可以包含背景颜色。
多个背景色以逗号分隔的列表形式指定，例如 background: background1, background2, ...;。除了 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%), transparent);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
bottom right,
left,
right;
}
结果
正如你在这里看到的，Firefox 徽标（在 background-image 中首先列出）位于气泡图形正上方，接着是位于所有先前“images”下方的渐变（最后列出）。每个后续的子属性（background-repeat 和 background-position）适用于相应的背景。因此，background-repeat 的第一个列出的值适用于第一个（最前面的）背景，依此类推。
多个背景下的值重复
在使用多个背景时，如果某个与背景相关的属性所给定的以逗号分隔的值少于背景层的数量，则用户代理会重复该值列表，直到值数量足以覆盖所有背景层为止。
例如：
css
.element {
background-image: url("a.png"), url("b.png"), url("c.png");
background-position: left top;
}
与下面的情况等价：
css
.element {
background-position:
left top,
left top,
left top;
}