mix-blend-mode 不支持 CSS 变量动态插值，因其是原子关键字属性，解析阶段即锁定合法值；需用 JS 直设、class 切换或监听 data 属性替代，变量仅可调控颜色/透明度等参与混合的内容层。
mix-blend-mode 本身不支持 CSS 变量动态插值——你不能写 mix-blend-mode: var(--mode) 并指望它实时生效。浏览器会直接忽略该声明，回退到 normal。这是底层规范限制，不是写法或兼容性问题。
mix-blend-mode 的值为什么不能用 CSS 变量？
CSS 变量（--xxx）可参与计算的属性必须是“可继承”或“可动画”的类型，而 mix-blend-mode 是一个**原子关键字属性**，其合法值（如 multiply、screen）在解析阶段就被锁定，不进入 CSSOM 的 runtime 计算链。即使你用 JS 动态设置 style.setProperty('--mode', 'overlay')，再通过 element.style.mixBlendMode = 'var(--mode)'，浏览器也只会解析为无效值。
常见翻车现象：
– DevTools 显示该行被划掉（invalid property value）
– 元素视觉上完全无混合效果，但其他样式正常
– getComputedStyle(el).mixBlendMode 返回 "normal"，哪怕你确认变量已定义
想动态切换混合模式，实际可行的替代方案
必须绕过变量直传，改用以下任一方式：
- 用 JS 直接操作
element.style.mixBlendMode，例如：el.style.mixBlendMode = modeList[i % modeList.length] - 预定义多组 class，靠 class 切换驱动，例如：
.blend-multiply { mix-blend-mode: multiply; }+el.classList.toggle('blend-multiply', isMultiply) - 若需响应式/主题化控制，把混合模式逻辑封装进自定义属性监听器（如
new MutationObserver监听data-blend属性变化），再触发 class 或 style 更新
注意：不要给切换元素加 will-change: transform 或 opacity: 0.99，否则混合层会被隔离，JS 改了也白改。
用 CSS 变量控制混合“效果强度”，而不是模式本身
虽然不能变量化 mix-blend-mode 值，但你可以用变量调控参与混合的**内容层透明度或颜色**，间接影响最终视觉强度：
- 对伪元素叠加层用
background-color: hsla(var(--h), var(--s), var(--l), var(--a))，再设mix-blend-mode: multiply - 文字混合时，用
color: hsl(var(--text-h), var(--text-s), calc(var(--text-l) * 0.8))配合mix-blend-mode: difference，让明暗对比随变量浮动 - 图片容器背景用
background: linear-gradient(rgba(0,0,0,var(--bg-alpha)), transparent)，再让子img设mix-blend-mode: screen—— 此时--bg-alpha就是可控的“压暗强度”
关键点：所有变量都作用于**可混合的内容本身**（颜色、透明度、背景），而非混合运算规则。这样既保持 CSS 变量优势，又不破坏混合前提。
iOS Safari 和 Android WebView 的隐藏陷阱
即使你 JS 控制得再稳，在 iOS 14–15 或部分 Android WebView 中，频繁切换 mix-blend-mode 值仍可能静默失效——不是报错，而是渲染结果卡在第一个值不动。这不是 bug，是引擎主动禁用动态混合以保帧率。
实操底线：
– 混合模式切换必须是**离散、低频事件**（如主题切换、用户点击按钮），禁止用于 scroll 或 touchmove 动画
– 移动端首选 multiply/screen/overlay，避开 color-burn、hard-light 等高开销模式
– 必须验证：Chrome DevTools → Rendering → 勾选 “Paint flashing”，看到混合区域有重叠高亮才算真正生效
最易被忽略的是：混合是否真发生在你预期的两层之间。父容器加了 transform 或 filter，哪怕只是 filter: blur(0)，也会切断链路——这时候变量再灵活也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
