mix-blend-mode 在 IE 和旧版 Safari 中不支持，连前缀也无效；应使用 @supports 检测并仅对 Chrome 41+、Firefox 32+、Safari 8+/iOS 9.3+ 启用，且不可用于关键视觉信息。
mix-blend-mode 在老浏览器里直接不生效怎么办
它在 IE 和旧版 Safari 里压根不支持，连前缀都救不了——mix-blend-mode 是 CSS Level 1 的特性，但实现进度极不统一。Chrome 41+、Firefox 32+、Safari 8+ 才开始支持，而 iOS Safari 直到 9.3 才真正稳定。别指望 -webkit-mix-blend-mode 能兜底，它在 Safari 7–8 中行为异常，甚至导致图层崩溃。
实操建议：
- 用
@supports (mix-blend-mode: multiply)做特性检测，只对支持的环境启用混合效果 - 绝对不要把关键视觉信息（比如文字可读性、图标识别）建立在
mix-blend-mode基础上 - 服务端或构建时可通过 User-Agent 判断 iOS
background-blend-mode 的兼容性比 mix-blend-mode 稍好但仍有坑
background-blend-mode 支持早一点（Chrome 35+、Firefox 30+、Safari 7.1+），但 Safari 7.1–8 对 background-image 多层叠加 + 混合的解析不稳定，容易出现闪烁或错位；Android 4.4 WebView 完全忽略该属性。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 同一组背景图在 Safari 8 下混合正常，但在 Safari 7.1 下只显示最上层图，其余被吞掉
- 使用
linear-gradient和url()混合时，部分安卓浏览器渲染出纯黑或纯白块
实操建议：
- 始终提供单层
background-image作为 fallback，例如：background-image: url("fallback.jpg");<br>background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("main.jpg");<br>background-blend-mode: overlay; - 避免在
background-blend-mode中混用 SVG 和 PNG，某些旧引擎对 SVG 渲染上下文处理不同步 - 测试时重点抓 Android 4.4、iOS 8.x、macOS Safari 7.1 这三个“临界版本”
用 filter: blend() 替代 mix-blend-mode？别试了
filter: blend() 不是标准语法，也从未进入任何浏览器正式支持列表。你看到的可能是实验性 flag（如 Chrome 的 --enable-blink-features=CSSBlendMode），或者混淆了 SVG 的 <feblend></feblend>。CSS Filter Level 2 规范里根本没有这个函数，所有尝试写 filter: blend(multiply) 都会静默失败。
实操建议：
- 删掉所有形如
filter: blend(...)的代码，它不会生效，也不报错，只会让你误以为“好像没问题” - 如果真需要滤镜式混合，可用
filter: contrast()或filter: brightness()做粗略模拟，但注意这和混合模式语义完全不同 - SVG 内嵌
<feblend></feblend>是可靠方案，但仅适用于内联 SVG，无法用于普通 HTML 元素混合
图片预合成是兼容性最稳的底线方案
当设计强依赖混合效果（比如深色文字必须靠 mix-blend-mode: difference 在动态图上反显），又必须覆盖微信内置浏览器、QQ 浏览器、低版本安卓 Webview 时，唯一靠谱的方式是服务端或构建时生成多套图：一张原图 + 一张已按目标混合模式预合成的 PNG。
使用场景：
- 运营活动页 Banner 图需适配深色/浅色背景切换，且文案必须清晰可读
- 数据可视化图表中，图例文字与渐变背景交叠，无法靠 z-index 或遮罩解决
实操建议：
- 用 ImageMagick 或 Sharp（Node.js）批量生成预合成图：
convert base.png overlay.png -compose Multiply -composite output.png
- 在 CSS 中用媒体查询或 JS 特性检测控制图源：
background-image: url("blend-fallback.png");作为兜底 - 注意预合成图体积增大问题，PNG 无损压缩后仍可能比原图大 2–3 倍，需配合 WebP 条件加载
复杂点在于混合逻辑不是线性的——multiply 和 screen 在不同亮度区域表现差异极大，预合成图必须严格匹配原始 CSS 中的图层顺序、尺寸缩放和 color space。这点很容易被忽略，结果就是“看起来差不多”，但设计师一放大就发现边缘发灰或对比度塌陷。
