CSS多背景图必须用英文逗号分隔，各图需一一对应设置position、size等属性，绘制顺序为声明逆序，IE11有加载失败导致全失效的bug，调试需核对computed样式。
background-image 多值写法必须用逗号分隔
CSS 里一个 background-image 属性能塞多张图，但不是靠空格、加号或换行，而是严格用英文逗号分隔。少一个逗号，浏览器就当整个值非法，直接忽略整条声明。
常见错误是复制粘贴时漏掉逗号，或者误把逗号写成中文逗号，结果页面只显示第一张图甚至全黑——因为解析失败后回退到默认背景色。
- 正确：
background-image: url(a.jpg), url(b.png), url(c.svg); - 错误：
background-image: url(a.jpg) url(b.png);（空格 → 只认第一个） - 错误：
background-image: url(a.jpg)，url(b.png);（中文逗号 → 整条失效）
每张图需配对独立的 background-* 参数
多背景不是“叠在一起就完事”，每张图都得单独指定位置、尺寸、重复方式等，否则会沿用前一张图的设置或继承默认值（比如 background-repeat: repeat），导致错位、拉伸或意外平铺。
所有 background-* 属性都支持多值，顺序必须和 background-image 一一对应。漏写某个参数，浏览器按顺序补缺省值，很容易踩坑。
立即学习“前端免费学习笔记（深入）”；
-
background-position: left top, center, right bottom;→ 第一张左上，第二张居中，第三张右下 -
background-size: 100px, cover, contain;→ 各自缩放规则互不干扰 - 如果只写一个
background-repeat: no-repeat;，那只有第一张图不重复，后面两张仍按默认repeat
层级顺序是「从后往前画」，不是从前往后
多背景的绘制顺序和数组索引相反：background-image 列表里最右边的图在最底层，最左边的在最顶层。这点反直觉，容易调错遮挡关系。
比如想让 logo 浮在纹理背景上，得把 logo 放前面、纹理放后面：background-image: url(logo.png), url(texture.jpg);。反过来写，logo 就被盖住了。
- 视觉层叠顺序 = 声明顺序的逆序
- 调试时可临时给每张图加半透明边框（
background-color: rgba(255,0,0,0.1)）快速定位哪张在上哪张在下 - 不能用
z-index调整，多背景本身就在同一个元素的背景层内
兼容性与性能注意点：IE11 及更早版本不支持
IE10 开始支持多背景，但 IE11 有 bug：当某张图加载失败（404）时，整组背景可能全部失效，而不是跳过那张继续渲染其余。Chrome/Firefox/Safari 都正常容错。
移动端基本无问题，但真要保 IE，得用降级方案——比如只设一张主背景，再用伪元素 ::before 叠加第二张图。
- 检查是否启用：用
getComputedStyle(el).backgroundImage看返回值是否含多个url(...) - 大量多背景 +
background-size: cover在低端安卓机上可能触发重绘卡顿，建议静态图优先用雪碧图替代 - SVG 背景图在部分旧版 Safari 中不支持
background-size缩放，需额外测试
多背景本身不难，难的是参数对齐和层级直觉。写完务必打开开发者工具，逐项核对 computed 样式里的每个 background-* 值是否如预期匹配，别信肉眼判断。
