mix-blend-mode 在部分浏览器中根本未实现，尤其 android webview 4.4–6.0 完全不解析，safari 7–8 行为异常甚至导致图层崩溃，chrome 41+、firefox 32+、safari 8+/ios 9.3+ 才开始稳定支持。
mix-blend-mode 在部分浏览器里根本不会执行，不是你写错了，是它压根没被实现——尤其在 Android WebView 4.4–6.0、Safari 直接用渐变背景（linear-gradient + url()）静态合成，是唯一能 100% 覆盖这些环境的替代方案。
mix-blend-mode 失效的真实原因不是“不支持”，而是“没代码”
Android 4.4–6.0 的系统 WebView 基于裁剪版 Blink，mix-blend-mode 相关解析逻辑被直接移除；Safari 7–8 虽有前缀但行为异常，甚至导致图层崩溃；IE 则完全无任何实现。这不是兼容性差，是引擎里根本没这功能。
-
@supports (mix-blend-mode: multiply)在 Android 6.0 WebView 中可能返回true，但渲染仍为normal—— 检测不可信 - DevTools 里能看到声明，Computed 值却始终是
normal，页面毫无反应 - 别浪费时间调
isolation或transform，那些是给“已实现但被截断”的场景用的，这里连入口都没加载
用 background-image 多层叠加模拟 multiply/screen/overlay 效果
放弃运行时混合，改用静态组合：一层图 + 一层带透明度的渐变，靠视觉叠加模拟混合结果。关键点是渐变必须用 rgba()，且 PNG 图保留 Alpha 通道。
- 替代
mix-blend-mode: multiply（暗部增强）：background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("main.jpg"); - 替代
mix-blend-mode: screen（亮部增强）：background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url("main.jpg"); - 替代
mix-blend-mode: overlay（智能明暗）：用两层渐变模拟，例如linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5)), linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0))叠加在图上 - 必须提供单层 fallback：
background-image: url("fallback.jpg");放在最前面，确保所有浏览器至少看到主图
为什么 background-blend-mode 也不可靠？
background-blend-mode 看似更安全，但它在旧环境里同样脆弱：Safari 15.4 前不支持，Android WebView 4.4–6.0 完全忽略，且混用 linear-gradient 和 url() 时，三星 Internet 4.x 等浏览器会把渐变层渲染成纯黑或纯白块。
-
@supports (background-blend-mode: multiply)在 Android 6.0 返回true，但实际失败 —— 不要依赖它做降级分支 - 避免在
background-blend-mode中混用 SVG 和 PNG，旧引擎对 SVG 渲染上下文处理不同步 - 多层背景叠加本身在 Safari 7.1–8 下就容易闪烁或错位，稳定性远不如单层
linear-gradient+ 图片
渐变替代方案的边界与注意事项
这个方案只适用于装饰性融合效果，比如 banner 标题压图、图标蒙层、文字适配背景色。它无法动态响应内容变化，也不能实现真正的像素级混合运算。
- 响应式场景下，需按
1x/2x导出多尺寸合成图，或 JS 动态切换style.backgroundImage（CSS 背景图不支持srcset） - 渐变角度和透明度需手动调试匹配原混合效果，
multiply通常对应rgba(0,0,0,0.3)–0.5，screen对应rgba(255,255,255,0.2)–0.4 - 如果设计中存在实时拖拽、动态 opacity 调节或多图层交互，Canvas 是唯一可行路径，但得自己处理跨域、缩放、重绘性能等问题
真正难的从来不是选哪个渐变值，而是意识到：当 mix-blend-mode 在真机上静默消失时，你面对的不是 CSS 写法问题，而是一个已被浏览器厂商主动放弃的 API —— 此时最有效的“兼容性修复”，就是彻底绕过它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
