必须放弃mix-blend-mode，改用background-image+linear-gradient静态模拟；因@supports检测仅判断声明解析而非实际混合，Android 6.0 WebView等环境常返回true但渲染恒为normal，故需服务端UA识别并真机覆盖测试。
mix-blend-mode 在旧浏览器里基本没得救，连前缀都无效，必须放弃运行时混合，改用 background-image + linear-gradient 静态模拟。
为什么 @supports (mix-blend-mode: multiply) 检测不可信
Android 6.0 WebView、iOS 8.x Safari 等环境会返回 CSS.supports('mix-blend-mode', 'multiply') 为 true，但渲染结果恒为 normal。这不是 bug，是检测机制和实际合成路径脱钩——检测只看声明是否被解析，不验证是否真正参与混合计算。
实操建议：
- 把
@supports当作“可选增强”开关，绝不用于关键视觉逻辑（比如文字可读性、图标识别） - 服务端判断优先解析
User-Agent中的iOS/8.、Android 4.4、WebView等关键词，而非依赖客户端 JS - 真机测试必须覆盖三星/华为旧机型（Android 4.4–6.0）、iOS 8.x Safari、macOS Safari 7.1
如何用 linear-gradient 替代常见 mix-blend-mode 效果
核心原则：用半透渐变层叠加在图片上，再放内容，绕过混合计算。必须保证 fallback 图片始终可见。
立即学习“前端免费学习笔记（深入）”；
示例写法：
background-image: url("fallback.jpg");
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("main.jpg");
对应关系：
-
mix-blend-mode: multiply→linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) -
mix-blend-mode: screen→linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)) -
mix-blend-mode: overlay→ 拆成两层渐变：深色区用rgba(0,0,0,0.2)，亮色区用rgba(255,255,255,0.2)，或直接用background-blend-mode: overlay（仅限 Chrome 35+/Firefox 30+，Safari 7.1+ 不稳定）
注意：渐变必须用 rgba()，图片必须保留 Alpha 通道；禁用 SVG 与 PNG 混用，旧引擎会渲染出纯黑/纯白块。
isolation: isolate 是硬性前提，不是可选项
没加 isolation: isolate，即使浏览器支持 mix-blend-mode，也可能因父级层叠上下文截断导致混合范围错误或静默失效。
关键细节：
- 必须显式加在应用
mix-blend-mode的容器上，例如.blend-container { isolation: isolate; } -
position: relative或z-index不能替代它——它们不创建独立混合上下文 - 对
position: fixed元素，在 iOS 10+ 上仍需加isolation: isolate，否则滚动中可能混合失效 - 如果父容器已设
isolation: isolate，子元素的mix-blend-mode就混不到更外层背景，要检查 DOM 层级
别碰 background-blend-mode 当兜底方案
它看似支持早一点（Chrome 35+、Firefox 30+、Safari 7.1+），但在临界版本里问题更隐蔽：
- Safari 7.1–8：常只显示最上层背景图，其余被吞掉
- Android 4.4 WebView：完全忽略该属性
- 三星 Internet 4.x：把
linear-gradient渲染成纯黑块
若非要尝试，只限单层渐变 + 单张 JPG/PNG 组合，禁用 SVG；且 fallback 必须放在多层声明之前，例如：
background-image: url("fallback.jpg");
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("main.jpg");
background-blend-mode: overlay;
测试重点不是“有没有效果”，而是“有没有错位、闪烁、图层丢失”——这些才是真实失效信号。
