使用多重背景
您可以为元素应用多重背景。这些背景是分层叠加的，您提供的第一个背景在最上面，最后一个背景在最底层。只有最后一个背景可以包含背景颜色。
多重背景以逗号分隔的列表形式指定，例如 background: background1, background2, ...;。这种语法被 background 简写属性及其除 background-color 之外的各个属性接受：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 中首先列出）在最上面，直接位于气泡图形上方，然后是渐变（最后列出），位于所有先前“图像”的下方。每个后续的子属性（background-repeat 和 background-position）都应用于相应的背景。因此，background-repeat 的第一个列出的值应用于第一个（最前面的）背景，依此类推。