4.1 基本原则
CSS允许在一个元素中使用多个背景图像，这为创建复杂和有趣的视觉效果提供了广阔的可能性。通过background-image属性及其相关属性 可以设置多个层次的背景图像，控制它们的顺序、位置和其他特性。
语法
要设置多个背景图像，可以使用逗号分隔不同的图像：
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
为每个层的属性
除了background-image，还可以使用以下属性来设置每个层的背景图像， 它们也支持用逗号分隔的多个值：
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
层次顺序
图像按列举的顺序排列，其中第一个图像离用户最近，最后一个离元素的背景最近。
4.2 图像叠加
简单的图像叠加。
使用示例：
CSS
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
HTML
<body>
<div class="multi-bg">多层背景</div>
</body>
代码解释：
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: 设置两个背景图像background-position: center, top left;: 第一个图像居中，第二个图像在左上角background-repeat: no-repeat, no-repeat;: 禁止两个图像的重复
4.3 使用多个图像
使用不同大小的多个背景图像。
使用示例：
CSS
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
HTML
<body>
<div class="multi-bg-sizes">具有尺寸的多层背景</div>
</body>
代码解释：
background-size: 50% 50%, 30% 30%;: 第一个图像缩放为元素宽高的50%，第二个图像缩放为元素宽高的30%
4.4 透明图像
叠加透明图像。
使用示例：
CSS
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
HTML
<body>
<div class="multi-bg-opacity">具有透明度的多层背景</div>
</body>
代码解释：
background-size: cover, 50%;: 第一个图像覆盖整个元素，第二个图像缩放为元素的50%::before: 伪元素在背景图像上添加半透明的黑色层
4.5 背景剪裁
使用其他属性和多个背景图像。
background-origin 和 background-clip
这些属性控制背景图像的显示区域和剪裁区域。
使用示例：
CSS
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
HTML
<body>
<div class="multi-bg-origin-clip">带有background-origin和background-clip的多层背景</div>
</body>
代码解释：
background-origin: padding-box, content-box;: 第一个图像从padding内边缘开始，第二个图像从内容开始background-clip: border-box, padding-box;: 第一个图像剪裁到边框外边缘，第二个图像剪裁到padding内
GO TO FULL VERSION