CSS background-image 支持多图叠加，用逗号分隔，顺序决定图层上下关系；需为每张图显式配齐 background-position、size、repeat 等属性，数量严格对应，否则错位遮盖。
background-image 怎么写多张图片
HTML 本身不直接设背景图，真正起作用的是 CSS 的 background-image 属性。它原生支持多张图片，用逗号分隔即可，顺序决定图层叠放——前面的在上层，后面的在底层。
关键不是“能不能”，而是“怎么叠才不糊”：必须配合 background-position、background-size、background-repeat 等属性逐层控制，否则所有图都默认铺满容器、居中、平铺，结果就是互相遮盖看不清。
- 每张图的参数必须一一对应，用逗号分隔，数量要和
background-image中的图片数完全一致 - 不写某一层的
background-size，浏览器会按“缺失即继承默认值”处理，容易误以为没生效 - 推荐显式写出每一层的全部关键属性，避免隐式 fallback
实际叠加示例：图标 + 渐变 + 底纹
比如要在按钮上叠三张图：左上角一个小图标、中间一个半透明线性渐变、整个背景一张低透明度纹理图。这时必须让每张图各司其职，不能靠猜。
button {
background-image:
url("icon.svg"),
linear-gradient(135deg, rgba(255,255,255,0.2), transparent),
url("texture.png");
background-position:
left 8px top 8px,
center,
center;
background-size:
16px 16px,
cover,
100px 100px;
background-repeat:
no-repeat,
no-repeat,
repeat;
}
注意：background-size: 16px 16px 只作用于第一张图（图标），cover 作用于第二张（渐变），100px 100px 作用于第三张（纹理）。少一个值，后面所有层的尺寸都会错位。
立即学习“前端免费学习笔记（深入）”；
常见踩坑：background-color 被盖住 or 图片不显示
多背景图下，background-color 永远在最底层。如果最后一张图是不透明的 png 或用了 background-repeat: repeat 铺满，那颜色就彻底看不见了。
- 想保留底色作 fallback？把
background-color写在background-image声明之后，它会自动沉底，且所有浏览器都支持 - 某张图死活不显示？先检查路径是否正确，再确认对应位置的
background-position是否把它“摆出可视区”了（比如设成1000px 1000px） - 用
linear-gradient当背景时，别漏写单位——linear-gradient(45deg, red, blue)合法，但linear-gradient(45, red, blue)会整个声明失效
兼容性与性能提醒
多背景图是 CSS3 标准特性，IE9+、Edge 12+、Chrome 1+、Firefox 3.6+ 都支持，但 IE9 不支持 linear-gradient，需要用滤镜或降级方案。
性能上，浏览器会为每张图单独解码和合成，所以：
- 别叠超过 3–4 层，尤其避免大尺寸图片 +
repeat - 纹理图建议用小尺寸
16x16或32x32的png，靠repeat模拟大范围效果 - SVG 图标优先用内联
data:URL，减少 HTTP 请求，也避免跨域问题
