mix-blend-mode 在 IE、Android 4.4–6.0 WebView、Safari ≤ 8 和 iOS ≤ 9.3 中未实现，表现为声明被忽略、Computed 值恒为 normal，需用 linear-gradient + url() 多层背景静态模拟替代。
mix-blend-mode 在 IE、Android 4.4–6.0 WebView、Safari ≤ 8 和 iOS Computed 值恒为 normal，连前缀都救不了。
用 @supports 检测但别信它返回的 true
很多开发者写 @supports (mix-blend-mode: multiply) 就以为万事大吉，结果在 Android 6.0 WebView 里检测返回 true，渲染仍是 normal。这不是 bug，是检测机制和实际渲染路径脱钩了。
- 只把
@supports当作“可选增强”的开关，绝不用于关键视觉逻辑 - 真机测试必须覆盖 Android 4.4–6.0 系统 WebView（尤其三星、华为旧机型）和 iOS 8.x Safari
- 若需服务端判断，优先解析
User-Agent中的OS和WebView版本，而非依赖客户端 JS 检测
放弃运行时混合，改用 background-image 多层静态叠加
这是唯一能 100% 覆盖所有旧环境的方案。核心是用 linear-gradient 模拟常见混合效果，且必须保证渐变用 rgba()、图片保留 Alpha 通道。
-
mix-blend-mode: multiply→background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("img.jpg") -
mix-blend-mode: screen→background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url("img.jpg") - 最前面必须加 fallback：
background-image: url("fallback.jpg")，确保所有浏览器至少看到主图 - 避免混用 SVG 和 PNG —— 旧引擎对 SVG 渲染上下文处理不同步，容易出纯黑/纯白块
别碰 background-blend-mode 当兜底方案
它看似支持早一点（Chrome 35+、Firefox 30+、Safari 7.1+），但在临界版本里问题更隐蔽：Safari 7.1–8 常只显示最上层背景图，其余被吞；Android 4.4 WebView 完全忽略；三星 Internet 4.x 会把 linear-gradient 渲染成纯黑块。
立即学习“前端免费学习笔记（深入）”；
- 若非要尝试，只用于单层渐变 + 单张 PNG/JPG 组合，禁用 SVG
- 永远提供单层
background-imagefallback，且 fallback 必须放在多层声明之前 - 测试重点不是“有没有效果”，而是“有没有错位、闪烁、图层丢失”——这些才是真实失效信号
启用 mix-blend-mode 前必须加 isolation: isolate
这不是可选项，是混合生效的硬性前提。没有它，即使浏览器支持，也可能因父级层叠上下文截断导致混合范围错误或静默失效。
- 给所有应用
mix-blend-mode的容器显式设置isolation: isolate -
position: relative或z-index无法替代 —— 它们不创建独立层叠上下文用于混合计算 - 哪怕容器已是
fixed或absolute，仍需加该声明，否则 iOS 10+ 可能混合失败 - 注意：
isolation: isolate本身在 IE 和旧安卓 WebView 中被忽略，但它不影响 fallback 层，所以安全
真正难处理的不是怎么写，而是判断“哪里真的需要它”。文字与图片融合？先试试 color 媒体查询 + 渐变遮罩；图标提亮？filter: brightness() 更稳；只有极少数静态装饰场景才值得承担它的兼容成本和性能代价。
