CSS的background属性怎么设置多张背景图？
在前端开发中，我们经常需要在一个元素上叠加多张背景图片，以实现复杂的视觉效果。CSS3引入了多背景图的功能，允许我们在同一个元素上使用多张图片，而不需要添加额外的DOM节点。这不仅简化了HTML结构，还提高了渲染性能。本文将详细介绍如何使用CSS的background属性设置多张背景图。
1. 基本语法
设置多张背景图的基本语法非常简单：只需将多个背景值用逗号,隔开即可。每个背景值可以包含背景图片路径、定位和重复方式。
HTML结构如下：
<div class="multi-bg"></div>
CSS样式如下：
.multi-bg {
width: 400px;
height: 300px;
background:
url('http://www.ipipp.com/img1.png') no-repeat top left,
url('http://www.ipipp.com/img2.png') no-repeat bottom right;
}2. 图层顺序（Z轴层级）
在多背景图中，图层的堆叠顺序非常重要。写在最前面的背景图会位于最上层（离用户最近），写在最后面的背景图会位于最下层（离用户最远）。如果最上层的图片没有透明区域，它将遮挡住下层的图片。
例如，在下面的代码中，img1.png在最上层，img2.png在中间，img3.png在最底层：
.multi-bg {
background:
url('http://www.ipipp.com/img1.png') no-repeat center,
url('http://www.ipipp.com/img2.png') no-repeat center,
url('http://www.ipipp.com/img3.png') no-repeat center;
}3. 背景尺寸与定位
除了图片路径，我们还可以为每张图片单独设置定位、重复方式和尺寸。同样使用逗号分隔，顺序与背景图对应。
.multi-bg {
background:
url('http://www.ipipp.com/img1.png') no-repeat left top / 100px 100px,
url('http://www.ipipp.com/img2.png') no-repeat right bottom / 50% 50%;
}注意：background-position 和 background-size 之间需要使用斜杠 / 分隔，即 位置 / 尺寸。
4. 渐变与图片结合
CSS渐变本质上也是一种背景图，因此我们可以将渐变与图片结合使用，通常将渐变放在最后作为底色，这样即使图片加载失败，也有背景色兜底。
.multi-bg {
background:
url('http://www.ipipp.com/icon.png') no-repeat center,
linear-gradient(to right, #ff7e5f, #feb47b);
}5. 拆分写法
除了简写的 background 属性，你也可以使用拆分属性来设置多背景，如 background-image、background-position、background-size 等。每个属性的值同样用逗号隔开。
.multi-bg {
background-image: url('http://www.ipipp.com/img1.png'), url('http://www.ipipp.com/img2.png');
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}总结
CSS多背景图功能非常强大，通过逗号分隔不同的背景层，我们可以轻松实现复杂的视觉叠加效果。掌握图层顺序、尺寸控制以及渐变与图片的结合，能够让我们的页面布局更加灵活高效，减少不必要的DOM嵌套。