逗号顺序决定图层上下关系，最左边URL在最上层、最右边在最底层；background-position和background-size必须与background-image的URL数量、顺序严格一一对应。
background-image 逗号顺序决定图层上下关系
最左边的 URL 在最上层，最右边的在最底层——这不是渲染优化策略，是 CSS 规范硬性定义的绘制顺序。你写 background-image: url(overlay.png), url(gradient.png), url(bg.jpg)，overlay.png 就永远盖在最上面，bg.jpg 永远垫底。
常见错误是把“底图”写在前面，结果文字遮罩或图标被盖住；或者误以为 JS 改变量值能动态调换顺序，其实只要声明顺序不变，层叠关系就锁死。
- 调试时临时加
background-color: rgba(255,0,0,0.1)到某一层，能快速确认它是否被上层完全遮挡 - SVG 或带 alpha 的 PNG 才能透出下层；JPG 即使设
opacity也无效，因为 opacity 作用于整个元素 - 渐变（如
linear-gradient()）本质是图像值，可和其他图片同场竞技，但它没有像素尺寸，background-size: 100px 100px对它无效
background-position 和 background-size 必须严格一一配对
每个图层的位置和尺寸不是“全局设置”，而是按逗号顺序逐个绑定。写错数量或顺序，浏览器要么广播第一个值到所有层（导致错位），要么截断多余值（导致某层回退到 auto）。
例如：有三张图，background-image 写了三个 URL，那 background-position 和 background-size 就必须各提供三个值，用逗号分隔，且顺序完全一致。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
background: url(a.png), url(b.png); background-position: center;→ 两张图都居中，b.png可能被挤出可视区 - 正确写法：
background-image: url(a.png), url(b.png); background-position: top left, bottom right; background-size: 80px 80px, cover; - 如果某层不需要偏移，显式写
0 0，别留空；空值会被忽略，破坏配对逻辑
用 class 切换代替运行时拼接 background 值
CSS 变量（--bg-layer-1）不能改变层叠顺序，它只是占位符。哪怕你把 --bg-layer-1 设为底图、--bg-layer-3 设为遮罩，只要它们在 background-image: var(--bg-layer-1), var(--bg-layer-2), var(--bg-layer-3) 里按此顺序出现，--bg-layer-1 就永远在顶层。
Safari 15.0–15.3 还有个致命 bug：只识别第一个 var()，其余全丢弃。靠 JS 动态 setProperty 修改变量，极易触发整层失效。
- 安全做法：预定义多个 class，每个 class 内固定完整的
background-image序列，比如.bg-mask-top和.bg-texture-bottom - JS 只负责
element.classList.toggle("bg-mask-top")，不碰任何--bg-变量 - 若必须开关某层，用降级写法：
background-image: var(--bg-main), var(--bg-overlay, none)，但注意none仍占一个位置，会影响后续值对齐
纯色背景不参与 background-blend-mode
background-blend-mode 只混合同一 background 声明里的多图层（图片 + 渐变），background-color 是独立层级，永远在最底且不可 blend。写成 background-color: red; background: url(a.png); background-blend-mode: multiply，blend 完全不起作用。
想实现多层颜色叠加，得把每层纯色都转成 linear-gradient(rgba(), rgba())，并显式控制 background-size 和 background-position。
- 不要写
background-color: rgba(255,0,0,0.5)多次——语法非法 - 每层渐变建议用相同起止色：
linear-gradient(red, red)，再配background-size: 100% 100%和background-repeat: no-repeat - alpha 值别设太高（如 >0.6），否则下层颜色会被过度压制，失去层次感
