mix-blend-mode 不生效主因是层叠上下文被父容器隔离、目标元素未正确定位或下方无混合对象；必须确保同级重叠结构、禁用opacity/filter/isolation等隐式隔离属性，且不与background-blend-mode混淆。
mix-blend-mode 不是 HTML 属性，它纯属 CSS 行为，必须通过 CSS 规则设置，且**只在满足层叠与定位条件时才真正生效**。写错位置、结构不对、父级干扰——90% 的“没反应”都源于此。
为什么设置了 mix-blend-mode 却看不到效果
这不是浏览器不支持，而是混合根本没发生。关键前提有三个：
-
mix-blend-mode作用对象是「当前元素」与其「下方堆叠上下文中的内容」（比如兄弟元素、父容器背景、甚至 canvas 绘图），不是自己和自己的背景 - 目标元素必须参与视觉重叠：至少得是
position: relative、absolute或inline-block，不能是默认display: inline - 父容器不能创建新的层叠上下文：禁用
isolation: isolate、opacity: 0.99、transform: translateZ(0)、filter: blur(1px)等隐式隔离属性
mix-blend-mode 必须和兄弟元素配对使用
单独给一个 <div> 加 mix-blend-mode: overlay 是无效的——它下面得有东西可混。典型结构是：
.bg { background-image: url("photo.jpg"); }
.text { position: absolute; top: 50%; left: 50%; mix-blend-mode: overlay; }
注意：.text 和 .bg 是同级兄弟，且 .text 被定位后覆盖在 .bg 上方；如果把 .text 塞进 .bg 内部，又没设 isolation: auto，混合可能被截断。
- 推荐用绝对定位 + 同级容器，结构清晰、可控性强
- 避免嵌套过深，尤其不要让
.text的任意祖先带opacity或will-change - iOS Safari 对
position: sticky元素上的mix-blend-mode支持极差，慎用
mix-blend-mode 和 background-blend-mode 别混用
这是最常踩的逻辑坑：
立即学习“前端免费学习笔记（深入）”；
-
background-blend-mode混的是「同一个元素的多个 background 图层」，例如一张图 + 一个渐变：background-image: url(a.jpg), linear-gradient(...); background-blend-mode: multiply; -
mix-blend-mode混的是「不同 DOM 元素之间」的像素，比如标题文字盖在 banner 图上 - 想让文字随背景图变化自动适配明暗？别硬套
mix-blend-mode，试试background-blend-mode配合伪元素遮罩更稳
移动端与 Safari 的隐藏限制
即使结构完全正确，在 iOS Safari（尤其是 iOS 15 及更早）上仍可能失效：
-
mix-blend-mode在transform: translateZ(0)或will-change: transform元素上大概率被忽略（因强制合成层隔离） -
<video>或<canvas>作为底层内容时，Safari 混合行为不稳定，Chrome/Firefox/Edge 104+ 更可靠 - Canvas 2D 绘制内容默认不参与 CSS 混合；如需叠加，得用
ctx.globalCompositeOperation在 JS 层实现
真要兼容性优先，background-blend-mode 是更安全的选择——它不依赖层叠上下文，调试直观，性能开销也低得多。
