mix-blend-mode 不生效主因是被隔离在独立堆叠上下文或未触发gpu合成层；需检查父容器是否隐式创建stacking context，加isolation: isolate或transform: translatez(0)解决。
mix-blend-mode 不生效，八成不是写错了值，而是被“提层”或“隔离”了——它对合成层和堆叠上下文极其敏感，稍有不慎就混合失败。
mix-blend-mode 为什么突然不跟背景混合了？
常见现象是：背景图好好的，标题加了 mix-blend-mode: screen 却毫无反应，DevTools 里看到 computed 值还是 normal。根本原因通常是它被关进了一个独立的堆叠上下文（stacking context），无法触达真正的背景层。
- 检查标题的**直接父容器**是否设置了
opacity（哪怕只是0.99）、filter（如blur(1px)）、transform（含translateZ(0)）、will-change或position: sticky—— 这些都会隐式创建新 stacking context - 如果父容器确实需要这些效果，必须显式加
isolation: isolate，否则子元素的混合只在该容器内部发生，跟 body 背景无关 - 用 Chrome DevTools 的 Layers 面板（F12 → More Tools → Layers）能直观看到哪些元素被单独分层，确认混合是否“被截断”
为什么 Safari 上文字变透明或闪烁？
iOS/macOS Safari 对 mix-blend-mode 的合成要求更严格：它要求参与混合的元素必须处于 GPU 合成层（composited layer），否则会降级为软件渲染，导致失效或抖动。
- 给标题加
transform: translateZ(0)或will-change: transform是最稳妥的强制提升方式 - 避免同时使用
mix-blend-mode和backdrop-filter（Safari 15.4+ 才稳定支持共存，旧版必崩） - 真机调试时，在 Safari 开发者工具 → Elements 面板右键元素 → “Show Paint Rectangles”，看是否有意外的重绘区域
mix-blend-mode 和 opacity 能一起用吗？
不能，也不该。两者叠加不仅大概率让混合失效，还会拖慢性能。
-
opacity会强制创建 stacking context，把元素“拎走”，使mix-blend-mode只能跟它的父背景混合（甚至变成纯黑/白） - 浏览器会放弃硬件加速路径，滚动和动画明显卡顿
- 替代方案：用
color: rgba(0, 0, 0, 0.7)控制文字透明度，用background-color: rgba(255, 255, 255, 0.1)控制背景蒙层，避开opacity
真正难调的从来不是 mix-blend-mode 的值选哪个，而是它在哪一层、跟谁混合、有没有被浏览器悄悄“移出舞台”。别急着改 mode，先打开 Layers 面板，看清层在哪，再决定加 isolation 还是提 transform。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
