mix-blend-mode 在 android 4.4–6.0 webview、safari 7–8、ie 全系列中未实现，表现为声明被忽略、computed 值恒为 normal，需用 linear-gradient + url() 多层背景静态模拟替代。
mix-blend-mode 在部分浏览器中无效，不是你写错了，是它压根没被实现——尤其在 Android 4.4–6.0 的系统 WebView、Safari 7–8、IE 全系列里，相关解析逻辑根本不存在。
它根本没进浏览器引擎代码
- Android 4.4–6.0 的 WebView 基于裁剪版 Blink，
mix-blend-mode解析器被直接移除 - Safari 7–8 虽保留
-webkit-mix-blend-mode前缀，但行为异常：图层崩溃、文字闪烁、computed 值始终为normal - IE 所有版本均无任何实现，连前缀都不识别
-
@supports (mix-blend-mode: multiply)在 Android 6.0 WebView 中可能返回true，但渲染结果仍是normal—— 检测不可信
别浪费时间调 isolation 或 transform，那些是给“已实现但被截断”的场景用的；这里连入口函数都没加载。
mix-blend-mode 失效的真实现象
- 页面毫无反应，DevTools 的 Computed 面板里
mix-blend-mode值显示为normal（哪怕你写了screen） - 文字或图标突然变黑/变白，不是颜色错，是混合未触发导致 alpha 通道被忽略
- 在真机上背景“消失”，实际是渐变/图片层被静默跳过，只剩透明底色
- 使用
background-blend-mode时，某些安卓机型（如三星 Internet 4.x）把渐变层渲染成纯黑块
这些不是 bug，是功能缺失。你看到的 CSS 声明只是被浏览器 parser 忽略了。
替代方案：用 background-image 多层叠加模拟
放弃运行时混合，改用静态组合，100% 覆盖旧环境：
替代
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");必须提供 fallback：把单层图放在最前面
background-image: url("fallback.jpg");background-image: linear-gradient(...), url("main.jpg");
注意：PNG 图必须保留 Alpha 通道，渐变必须用 rgba()，否则在旧引擎里会降级为纯色块。
为什么不用 background-blend-mode 作兜底？
它兼容性略好（Chrome 35+、Firefox 30+、Safari 7.1+），但仍有硬伤：
- Safari 7.1–8 对多层
background-image+background-blend-mode解析不稳定，常只显示最上层图 - Android 4.4–6.0 WebView 完全忽略该属性
- 混用 SVG 和 PNG 时，旧引擎对 SVG 渲染上下文处理不同步，导致错位或纯黑
所以 fallback 结构里，background-blend-mode 只能作为可选增强项，不能替代 linear-gradient + url() 的静态组合。
真正难的从来不是选哪个 mode，而是确认目标环境有没有那行 C++ 代码。查 UA、抓真机、看 computed 值，比反复改 CSS 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
