mix-blend-mode生效需同时满足三前提：元素有可渲染内容、背后有非透明底色、与底色同属一个层叠上下文；否则无效。
mix-blend-mode 只对「元素内容」和它背后的「堆叠上下文 backdrop」起作用，不是所有重叠都能混合——比如两个 div 堆在一起，但父容器没背景、没内容、没层叠上下文，那就什么也看不到。
mix-blend-mode 生效的三个硬性前提
它不像 opacity 那样设了就见效，必须同时满足：
- 该元素本身有可渲染内容（文字、
img、svg、带content的伪元素等），纯空div+background-color不算 - 它背后必须存在非透明的“底色”：可以是父元素的
background-color、background-image，也可以是更底层的兄弟元素，甚至是body的背景 - 它和背后的底色必须处于**同一个 stacking context**；一旦中间某层用了
transform、filter、opacity: 0.99或will-change，就会切断上下文，导致它只能跟那个“新上下文”的背景混合（通常是透明的）
为什么加了 mix-blend-mode 却没反应？
90% 是因为 stacking context 中断。典型现象：
- 父容器设置了
transform: translateY(10px)→ 子元素的mix-blend-mode: multiply看不出效果 - 给容器加了
filter: blur(2px)→ 混合失效，且无法通过子元素绕过 - 用
position: relative+z-index试图控制层级，但没意识到 z-index 会创建新 stacking context
解决办法很简单：在混合元素的直接父容器上加 isolation: isolate。它强制创建一个独立的 stacking context，并让子元素能正确访问其“背后真实世界”的颜色。
mix-blend-mode 和 background-blend-mode 别混用
这是最容易踩的命名陷阱：
立即学习“前端免费学习笔记（深入）”；
-
mix-blend-mode：处理「元素内容」和「它背后的东西」之间的混合（比如文字压图、图标叠在渐变上） -
background-blend-mode：只管「同一个元素的多个背景层」之间怎么混合（比如一张图 + 一个渐变色块）
如果你把一张图片作为 background-image 放进 div，再给这个 div 设 mix-blend-mode: overlay，结果一定是空白——因为背景图不算“内容”，不参与 mix-blend-mode 计算。要让它生效，得换成 <img> 标签，或用伪元素生成真实内容并设 background-image + content: ""。
multiply / screen / overlay 在实际页面中的行为差异
它们在浏览器里的计算基于 sRGB，没有 Photoshop 的预乘 Alpha 处理，所以效果偏“生硬”：
-
multiply：深灰容易直接变黑，纯白区域完全透明；适合 logo 压浅图，但慎用于含白色细节的纹理图层 -
screen：稍亮的底色就容易发灰，建议搭配opacity: 0.6–0.8控制强度，避免过曝 -
overlay：对中间调增强极强，标题文字用它很抢眼，但低分辨率图或压缩 JPG 上容易放大噪点 -
difference：调试时很好用（翻转颜色查对齐），但上线前必须关掉——它会让彩色信息彻底不可读
真正难搞的从来不是写对属性，而是控制好层叠顺序、隔离上下文、以及理解“背后到底是什么颜色”。这些细节在开发机上看不出来，一上真机、一换系统色彩配置，就全露馅。
