多重背景图必须用英文逗号分隔URL，background-position/size/repeat需一一对应图层数量，图层顺序从左到右、最左在最上，IE11及以下需手动fallback。
background-image 多图必须用英文逗号分隔
浏览器只认严格英文逗号分隔的 url() 列表，任何空格、换行、中文逗号（、）、全角逗号或零宽字符都会导致整条 background-image 声明被丢弃——你看到的“全黑”“纯白”或“只剩一张图”，基本都是这个原因。
- ✅ 正确：
background-image: url(logo.png), url(texture.jpg), url(gradient.svg); - ❌ 错误：
background-image: url(logo.png) url(texture.jpg);（空格 → 仅第一张生效） - ❌ 错误：
background-image: url(logo.png)，url(texture.jpg);（中文逗号 → 整条无效）
复制粘贴时极易混入不可见 Unicode 逗号，建议手敲，或在编辑器中开启「显示不可见字符」功能核对。
background-position / size / repeat 必须一一对应图层数量
这些属性支持多值，但值的数量和顺序必须与 background-image 中的 URL 数量完全一致。浏览器不报错，而是静默补缺省值，结果常是某张图缩成小点、偏移出视区、或意外平铺盖住其他层。
- 写了 3 张图：
background-image: url(a.jpg), url(b.png), url(c.gif); - ✅ 正确：
background-position: top right, center, 20px 10px; - ❌ 错误：
background-position: top right, center;（少一个 → 第三张用默认0 0） - ✅ 推荐显式写出全部值，哪怕相同：
background-repeat: no-repeat, no-repeat, no-repeat;
图层顺序是「从左到右，最左在最上」
这不是视觉直觉里的“后写的盖前面”，而是声明顺序决定堆叠：第一个 url() 在最顶层，最后一个在最底层。写反了，水印、遮罩、图标就根本看不见。
立即学习“前端免费学习笔记（深入）”；
- 想实现「SVG 图标 > 渐变 overlay > 主图 > 底纹」？
- ✅ 必须写成：
background-image: url(icon.svg), linear-gradient(to bottom, rgba(0,0,0,0.2), transparent), url(main.jpg), url(pattern.png); - ❌ 写成主图在前、图标在后 → 图标被盖住，调试时也查不到
-
z-index对多重背景完全无效——它们同属一个背景层，无法跨层干预
IE11 及更早版本不支持，fallback 要手动写
CSS 多重背景在 IE10+、Chrome 10+、Firefox 4+ 支持良好，但 IE9 及以下直接忽略整条声明；IE11 更麻烦：某张图加载失败（404），整组背景可能全失效，而非跳过该图。
- 稳妥做法：先写单层 fallback，再覆盖多层
- ✅ 示例：
.box { background-image: url(fallback.jpg); /* IE9 及以下只认这行 */ background-image: url(mask.png), url(gradient.svg), url(bg.jpg); /* 现代浏览器覆盖 */ } - 真要保 IE，优先考虑伪元素方案：
::before承载额外图层，用z-index和transform独立控制
实际写的时候，最容易被忽略的是：*所有 background- 属性都得按图数量配齐值，且顺序不能错位——不是“写了就行”，而是“差一位，就错一层”。**
