mix-blend-mode 与 filter 不能共存于同一元素，因 filter 会修改原始像素导致混合失效；必须拆分为两层：混合层设 mix-blend-mode，滤镜层单独加 filter 并设 mix-blend-mode: normal。
mix-blend-mode 本身不能实现“滤镜叠加”，它根本不是滤镜——想叠加模糊、对比度、饱和度，必须用 filter 链式写法；mix-blend-mode 只负责让元素和它正下方的内容混合。两者机制冲突，强行合并在同一元素上，效果不可控甚至失效。
mix-blend-mode 和 filter 为什么不能写在同一个元素上
mix-blend-mode 的计算依赖原始像素值，而 filter（如 blur()、contrast()）会先修改这些像素——浏览器无法用已被模糊/调整过的图像去跟背景做混合运算，结果常是颜色失真、混合失效或整块变黑/白。
- 典型现象：
div { filter: blur(2px); mix-blend-mode: overlay; }在 Chrome 可能勉强可见，但在 Safari 或滚动时直接降级为normal - 移动端更敏感：iOS Safari 对带
filter的元素自动创建隔离层，mix-blend-mode失效范围扩大 - 性能代价高：两者叠加会强制全区域重绘，动画帧率明显下降
想同时有自身滤镜 + 背景混合，必须拆成两层 DOM
正确做法是把「自身视觉处理」和「与背景混合」分离到不同元素，靠定位叠在一起：
- 外层容器加
isolation: isolate，防止混合溢出或被父级隔离属性干扰 - 混合层（如文字、图标）设
mix-blend-mode，但不加任何filter - 滤镜层（如毛玻璃遮罩、色调覆盖）用绝对定位覆盖在混合层上方或下方，单独加
filter，并确保它不参与混合（显式设mix-blend-mode: normal或移除该属性）
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="blend-container"> <div class="bg-image"></div> <div class="blend-layer">文字</div> <div class="filter-overlay"></div> </div>
对应关键 CSS：
.blend-container { isolation: isolate; }
.blend-layer { position: absolute; mix-blend-mode: screen; }
.filter-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
backdrop-filter: blur(8px);
mix-blend-mode: normal; /* 关键：关闭混合 */
}移动端 mix-blend-mode 失效的常见触发点
不是代码错，而是层叠上下文被意外切断。以下操作会让子元素的 mix-blend-mode 只跟透明背景混合，结果“看不见”：
- 父容器用了
transform: translateZ(0)或scale(1)（硬件加速常用，但会建新 stacking context） - 父容器设了
backdrop-filter（哪怕只是backdrop-filter: none，Safari 也会隔离） - 父容器有
opacity: 0.99或filter: opacity(99%) - 混合元素自己用了
position: relative+z-index（未配isolation: isolate时极易断链）
修复方式统一：在混合元素的**直接父容器**加 isolation: isolate，别指望靠祖先元素兜底。
哪些 mix-blend-mode 值在真实项目里最稳
别贪多，优先选三个兼容性好、行为可预测的：
-
multiply：适合深色文字压浅色图，安全不炸色 -
screen：提亮型混合，常用于图标浮在暗图上 -
overlay：兼顾明暗，文字在渐变/纹理背景上表现最自然
慎用：difference 在深色背景上会让黑字消失；color-dodge 遇到纯黑区域直接过曝；exclusion 和 hard-light 在部分安卓 WebView 渲染为纯黑——这些不是 bug，是规范定义的行为，但 UI 上就是崩。
真正容易被忽略的，是混合对象本身：没兄弟元素、没父背景、没脱离文档流的定位，mix-blend-mode 就是死命令。它不挑浏览器，只挑结构。
