根本原因在于CSS自定义属性不参与背景解析，必须显式拼接到background-image中；空字符串或none会触发降级，推荐用transparent占位并以class控制开关。
用 :root 定义多层背景变量时，为什么只生效第一层？
根本原因在于 CSS 自定义属性（--bg-layer-1、--bg-layer-2 等）本身不参与背景解析，必须显式拼接到 background 或 background-image 中。直接写 background: var(--bg-layer-1), var(--bg-layer-2) 是合法的，但一旦某层变量值为空字符串或 none，浏览器仍会尝试解析它，可能触发降级或意外覆盖。
实操建议：
- 所有层变量统一用
url(...)、linear-gradient(...)或none格式赋值，避免空字符串； - 用
background-image而非background控制叠加，防止background-color等隐式属性干扰； - 为每层预留“禁用占位符”，例如
--bg-layer-2: transparent;—— 透明色在叠加中真正“不可见”，且不会破坏层序。
background-image 多层变量拼接的写法和兼容性陷阱
CSS 不支持运行时拼接字符串，所以不能靠 var(--bg-layer-1) var(--bg-layer-2) 自动合并。必须手动写出完整层列表，并确保顺序与 z-index 逻辑一致（从底到顶）。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
body {
--bg-layer-1: url("grid.png");
--bg-layer-2: linear-gradient(135deg, #ff9a9e, #fad0c4);
--bg-layer-3: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 50%);
background-image:
var(--bg-layer-1),
var(--bg-layer-2),
var(--bg-layer-3);
}
注意点：
- Chrome 61+、Firefox 60+、Safari 15.4+ 支持多层
var()在background-image中；Safari 15.0–15.3 有 bug，会忽略除第一层外的所有var()，必须升级或加降级； - 不能把
none当作“关闭开关”——它仍算一层，可能遮挡下层；改用transparent更安全； - 如果某层需动态关闭，推荐 JS 切换 class，而非反复重设变量值（避免 CSSOM 重排开销）。
用 class 控制开关比纯变量更可靠
纯靠修改 --bg-layer-N 值来开关，容易因值类型不一致（比如误设成 "off" 字符串）导致整条 background-image 解析失败，退回到初始样式甚至空白。
更健壮的做法是预设几组 class：
.bg--full { background-image: var(--bg-layer-1), var(--bg-layer-2), var(--bg-layer-3); }
.bg--base { background-image: var(--bg-layer-1), var(--bg-layer-2); }
.bg--minimal { background-image: var(--bg-layer-1); }
然后用 JS 切换：
document.body.classList.replace('bg--full', 'bg--base');
好处：
- 避免 CSS 变量值校验问题；
- 可配合
transition: background-image 0.3s做淡入淡出（虽然部分浏览器不支持该属性过渡，但至少语义清晰）； - 便于在 DevTools 中快速定位当前启用哪几层。
移动端 Safari 的 background-blend-mode 和变量叠加冲突
如果叠加层用了 background-blend-mode: multiply 等混合模式，再配合变量控制，Safari iOS 16.6 之前存在一个隐藏坑：当某层变量被设为 transparent 时，混合模式仍会对该层计算，导致颜色异常偏暗或发灰。
绕过方式：
- 禁用混合模式，改用
rgba()调节上层透明度； - 或彻底移除该层 —— 即不用
transparent占位，而是用 JS 移除对应 class，让 CSS 规则本身不包含那层声明； - 测试务必覆盖 iOS 16.5–17.2，这个区间混合模式行为变动频繁。
多层背景开关看似只是变量赋值，实际卡点全在浏览器对空值、透明值、混合模式的解析差异上。最省心的路径是：变量只存有效图像值，开关交给 class 控制，透明层用 transparent 而非 none，iOS 混合模式单独兜底。
