mix-blend-mode 不支持 CSS 变量，因其为关键字型枚举属性，仅接受固定值；需通过预设原子类、data 属性或 Tailwind 响应式类动态控制，并确保 isolation: isolate 以维持混合上下文。

mix-blend-mode 中不能使用 CSS 变量，这不是“怎么用”的问题，而是根本行不通——浏览器解析时直接跳过 var(--mode)，不计算、不降级、不报错，只静默设为 normal。

Blender Render

自动化 Blender 无头预览，支持 STL/OBJ/FBX/BIM 及多部件 3D 打印模型；适用于本地路径模型导入、Workbench 正交预览，稳定可靠。

下载

---

mix-blend-mode: var(--mode) 为什么总失效

• 浏览器 DevTools 里该声明会被划掉，并提示 “Invalid property value”
• 所有主流引擎（Chrome/Firefox/Safari）行为一致，不是兼容性问题，是 CSS 规范限制
• mix-blend-mode 是关键字型枚举属性，只接受 multiply、screen、overlay 等固定值，不参与自定义属性的计算流程
• 即使加 fallback：mix-blend-mode: var(--mode, multiply)，依然无效
• style.setProperty('--mode', 'difference') 动态改变量，对已声明的 var(--mode) 无任何影响

---

为什么有人坚持想用变量驱动混合模式

• 误以为和 color 或 background-color 类似，可被 var() 替换
• 想复用主题配置（比如深色模式下自动切到 luminosity）
• 希望用 Tailwind 的 class 前缀（如 md:mix-screen）配合变量做响应式切换

但这些需求的正确落点不在 CSS 变量上，而在 class 层级或 data 属性。

---

真正能动态切换 mix-blend-mode 的做法

• 预设原子类，用 @layer utilities 定义：

  @layer utilities {
  .mix-multiply { mix-blend-mode: multiply; }
  .mix-screen    { mix-blend-mode: screen; }
  .mix-luminosity { mix-blend-mode: luminosity; }
  }

• JS 切换类：el.classList.toggle('mix-screen', isScreenMode)
• 或用 data 属性驱动：el.dataset.blend = 'overlay'，配 CSS 规则 [data-blend="overlay"] { mix-blend-mode: overlay; }
• 若需响应式支持，直接写 md:mix-overlay（Tailwind v3.3+ 支持）

---

最容易被忽略的一环：isolation 和堆叠上下文

• 即使 class 切换成功，mix-blend-mode 仍可能没反应
• 常见原因：父元素有 opacity、transform、filter 或未显式设置 isolation: isolate，导致子元素被提层隔离，脱离混合上下文
• 必须检查：目标元素是否在同一个 stacking context 中与预期 backdrop（背景/底层元素）共存
• isolation: isolate 不是可选优化，而是混合生效的前提条件之一