CSS多背景图必须用英文逗号分隔，各background-*属性值数量与顺序须严格对应；层级为声明逆序，最左图在顶层；IE11不支持复合语法需降级。
background-image 多值必须用英文逗号分隔
浏览器只认严格语法：background-image 的多个 URL 之间必须用英文逗号（,）分隔，不能是空格、中文逗号、分号或换行。漏一个逗号，整条声明就失效，background-image 回退为 none，元素只剩 background-color 或透明底色。
常见错误现象：
- 复制粘贴时带入中文逗号 → 整个属性被忽略
- 写成
url(a.jpg) url(b.png)→ 只解析第一个 URL，第二个被丢弃 - 路径拼错或 404 → 对应图层空白，但其余图层仍正常渲染
正确写法示例：background-image: url(logo.svg), url(pattern.png), url(gradient.png);
每张图的 background-position 必须一一对应
background-position 支持多值，且顺序必须与 background-image 中的图片顺序严格对齐。第一组值控制第一张图，第二组控制第二张，以此类推。不写全，浏览器会循环复用已有值，极易导致错位。
立即学习“前端免费学习笔记（深入）”；
例如：
-
background-position: top left, center;→ 第一张图在左上，第二张居中，第三张又回到top left（因只有两个值，循环使用） -
background-position: 20px 30px, right 10px, bottom 5px;→ 每张图独立定位，互不干扰 - 若只写
background-position: center;→ 所有图都居中，无法实现分层错位效果
调试建议：打开浏览器开发者工具，查看「Computed」面板里的 background-position 实际计算值，确认是否按预期拆分。
绘制顺序是「从左到右声明，从上到下叠加」
多背景图的层叠逻辑反直觉：background-image 列表里最左边的图在最顶层，最右边的在最底层，background-color 在所有图之下。这和数组索引相反，但和 box-shadow 一致。
这意味着：
- 需要遮挡关系时，把半透明装饰图放前面，底图放后面
- 误把底图写在前面 → 它会盖住所有后续图，变成“只看到一张图”
- IE11 存在加载竞态 bug：某张图加载失败，可能导致整组背景被丢弃（不是仅该图失效）
验证方式：临时给每张图加不同 background-color 占位，或用 opacity 逐层测试可见性。
background-size 和 background-repeat 也要配对写全
background-size 和 background-repeat 同样支持多值，规则与 background-position 完全一致。漏写或数量不匹配，会导致尺寸拉伸异常或意外平铺。
典型踩坑点：
-
background-repeat: no-repeat;→ 仅第一张图不重复，其余默认repeat，可能满屏雪花 -
background-size: cover, 100px;→ 第一张等比填满，第二张宽高都是 100px，第三张又 fallback 到cover - 用
contain或auto时注意：它们依赖原始图比例，若图本身畸变，缩放后更明显
推荐做法：显式写出全部值，哪怕重复，也比靠循环逻辑猜行为更可靠。比如三张图都需 no-repeat，就写 background-repeat: no-repeat, no-repeat, no-repeat;
真正难的不是语法，而是当三张图分别承担「图标+纹理+渐变底」角色时，如何让它们在不同视口下保持相对位置稳定——这时 background-origin 和 background-clip 就不再是可选项了。
