mix-blend-mode 不支持 CSS 变量，因其是关键字型枚举属性，仅接受 multiply、screen 等固定值；CSS 引擎解析时直接跳过 var()，不计算也不降级，属规范限制而非浏览器 Bug。
mix-blend-mode 不接受 CSS 变量，写 mix-blend-mode: var(--mode) 会静默失效，DevTools 中该声明被划掉并提示 “Invalid property value”。
mix-blend-mode 为什么不能用 var()？
它不是数值或颜色类属性，而是关键字型枚举属性：只允许 multiply、screen、overlay 等固定值。CSS 引擎在解析时根本不尝试计算 var()，直接跳过或降级为 normal。
这不是浏览器 Bug，也不是构建工具（如 Tailwind、PostCSS）的问题，是 CSS 规范本身限制 —— 所有主流引擎（Chrome/Firefox/Safari）行为一致。
- 即使加 fallback：
mix-blend-mode: var(--mode, multiply)，依然无效 - 用
!important或嵌套@supports也无济于事 - 通过
style.setProperty('--mode', 'overlay')动态改变量，对已声明的var(--mode)无响应
真正能动态切换混合模式的方案
把“变量逻辑”落到 class 层级，而非 CSS 属性值本身。预设一组 utility 类，再用 JS 控制开关。
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 中定义原子类：
@layer utilities { .mix-multiply { mix-blend-mode: multiply; } .mix-overlay { mix-blend-mode: overlay; } .mix-difference { mix-blend-mode: difference; } } - JS 切换：
el.classList.toggle('mix-overlay', isOverlayMode) - 或用
data属性驱动：el.dataset.blend = 'overlay'，配合 CSS 规则[data-blend="overlay"] { mix-blend-mode: overlay; } - 服务端/构建时切换（如主题色绑定混合模式）：用 PostCSS 插件生成多套 class 名，避免运行时 JS
background-blend-mode 同样不支持 var()
和 mix-blend-mode 一样，background-blend-mode 也是关键字型属性，background-blend-mode: var(--bg-mode) 同样失效。
但它的使用场景更可控：背景层通常静态、可预设。推荐做法仍是 utility class + class 切换，例如：
-
.bg-multiply、.bg-screen等对应不同混合策略 - 若需多层背景分别混合（如
background-blend-mode: multiply, screen），必须硬编码，无法用变量动态组合顺序或数量 - 注意：多值写法中每个值都必须是关键字，不能混入变量
最易被忽略的一点：混合模式的效果高度依赖堆叠上下文和实际渲染内容。哪怕 class 切换成功，若父元素没背景、或子元素 isolation: isolate 隔离了混合上下文，效果也会消失——别只盯着变量和 class，先确认混合所需的图层关系是否真实存在。
