mix-blend-mode不能叠加多个滤镜，因为它控制元素与下方背景的混合，而非自身视觉处理；叠加滤镜应使用filter属性链式写法。
mix-blend-mode 为什么不能直接叠加多个滤镜
mix-blend-mode 不是滤镜，它控制的是「当前元素和它下方的背景内容」如何混合，而不是对自身应用多层视觉处理。你给一个 div 设置 mix-blend-mode: multiply，它只会和父容器里它下面的那些元素（比如图片、文字、色块）发生混合，不会对自己重复叠加模糊、对比度或饱和度——那是 filter 的事。
常见错误现象：mix-blend-mode 设了两层、三层，结果没变化，或者画面突然全黑/全白；其实是混合对象错了，比如子元素没脱离文档流，或者背景是纯色（纯色 + multiply = 没效果）。
- 真正想“叠加滤镜”，该用
filter：比如filter: blur(2px) contrast(1.3) saturate(1.2)，浏览器原生支持多函数链式写法 -
mix-blend-mode的典型使用场景：文字浮在图片上自动变清晰（difference）、按钮悬停时与背景产生色彩互动、制作非破坏性图层混合效果 - 它依赖堆叠上下文和绘制顺序：父元素必须有背景（哪怕是透明
rgba(0,0,0,0)），且目标元素不能是position: static下的普通流内元素（常需position: relative或isolation: isolate触发新层）
mix-blend-mode 和 filter 混合使用的正确姿势
想让一个元素既有自身滤镜（如毛玻璃 backdrop-filter），又和背景混合（如 screen 提亮），得拆成两层 DOM：一层负责滤镜，一层负责混合。因为 filter 和 mix-blend-mode 作用机制冲突——前者修改自身像素，后者依赖未修改的原始像素去跟背景算混合值。
实操建议：
- 外层容器设
isolation: isolate（防止混合溢出到更外层） - 内层元素（要混合的那个）设
mix-blend-mode，但不要加filter - 如果还要自身滤镜效果，用另一个绝对定位的伪元素或兄弟元素覆盖，单独加
filter，并确保它不参与混合（比如设mix-blend-mode: normal或移除该属性） - 注意性能：
mix-blend-mode在滚动或动画中容易触发全屏重绘，iOS Safari 对difference和exclusion支持弱，慎用
示例结构：
<div class="blend-container"> @@##@@ <div class="blend-layer">文字</div> <div class="filter-overlay"></div> </div>
对应 CSS：
.blend-container { isolation: isolate; }
.blend-layer { 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 值实际可用、哪些容易翻车
不是所有混合模式都适合日常 UI。浏览器支持度和视觉可控性差异很大。
- 推荐优先用：
multiply（压暗）、screen（提亮）、overlay（增强对比）、color-dodge（高光强化）——兼容性好（Chrome/Firefox/Safari 15.4+），结果可预测 - 慎用：
difference和exclusion：在深色背景上会让浅色文字反相成黑，但 iOS Safari 渲染不稳定，有时直接不生效 - 基本不用：
hue/saturation/color/luminosity：它们依赖 HSL 颜色空间计算，在部分安卓 WebView 里行为异常，且对灰阶内容几乎无感 - 别忘了
isolation: isolate：没有它，mix-blend-mode可能意外影响祖先元素的背景，尤其在 Vue/React 动态插入节点时更易出问题
替代方案：当 mix-blend-mode 不行时，用 filter + SVG 滤镜兜底
如果目标是“叠加滤镜效果”（比如先高斯模糊再加锐化），而 mix-blend-mode 完全不相关，那就别硬套。CSS filter 本身支持函数叠加，但某些复杂操作（如自定义卷积、颜色查找表）仍受限。
这时更可靠的做法是：
- 用
filter: url(#my-svg-filter)引入内联 SVG 滤镜，它支持<feconvolvematrix></feconvolvematrix>、<fecolormatrix></fecolormatrix>等精细控制 - SVG 滤镜可复用、可动态改参数（通过 JS 修改
<fecolormatrix values="..."></fecolormatrix>），比 CSSfilter更灵活 - 兼容性底线：IE 不支持，但现代浏览器都 OK；注意 Safari 对
url(#id)要求 SVG 必须在 DOM 中（不能仅是外部文件） - 别把 SVG 滤镜和
mix-blend-mode混着用——它们走不同渲染管线，叠加后效果不可控，调试成本极高
真正难的不是写对语法，而是分清：你要的是“元素和背景怎么互动”，还是“元素自己长什么样”。混在一起调，八成卡在某个 Safari 版本的渲染 bug 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
