唯一可靠方案是用多层background-image+rgba渐变静态模拟，可100%覆盖android 4.4–6.0、safari 7–8、ie全系列等零支持环境；@supports检测不可信，-webkit-mix-blend-mode在safari 7–8会导致图层崩溃。
直接用多层 background-image + rgba() 渐变静态模拟，是唯一能 100% 覆盖 Android 4.4–6.0、Safari 7–8、IE 全系列等“零支持”环境的方案。别试 @supports 检测，它在 Android 6.0 WebView 中会返回 true 但渲染恒为 normal；也别指望 -webkit- 前缀，Safari 7–8 的 -webkit-mix-blend-mode 会导致图层崩溃。
为什么 background-blend-mode 不是可靠 fallback
background-blend-mode 在 Safari 15.3 及更早版本中整条声明被忽略——DevTools 里该属性直接灰掉或标为 invalid；Android 4.4 WebView 完全不解析；即使写成 background: #ff0000, url("a.png"); background-blend-mode: multiply;，旧引擎也只渲染最上层图，其余静默丢弃。常见错误包括：
- 把
background-color和background-image分开写 →background-blend-mode因缺少第二层而失效 - 混用 SVG 与 PNG 背景 → 旧引擎对 SVG 渲染上下文处理不同步，出现纯黑/白块
- 没显式写
background-size和background-position→ 各层默认铺满，互相覆盖
怎么用多层 background-image 手动模拟 mix-blend-mode 效果
放弃运行时混合，改用静态叠加。所有图层必须写进同一个 background 声明，用逗号分隔，顺序决定叠放（后写的在上层）：
- 模拟
mix-blend-mode: multiply（压暗背景）：background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("main.jpg"); - 模拟
mix-blend-mode: screen（提亮）：background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url("main.jpg"); - 必须加单层 fallback：
background-image: url("fallback.jpg");放最前面，确保降级后仍可见 - PNG 图必须保留 Alpha 通道，否则渐变叠加会失效成纯色块
移动端特别注意：stacking context 会悄悄截断混合
哪怕浏览器支持 mix-blend-mode，只要混合元素的**直接父容器**加了 opacity: 0.99、transform: translateZ(0)、backdrop-filter: blur(1px) 或 position: sticky，就会隐式创建新 stacking context，导致子元素只能跟那个“透明背景”混合——结果就是文字全黑、全白或消失。
- 解决方法：在混合元素的**直接父容器**上强制加
isolation: isolate - 不能靠
z-index或position: relative替代，它们不创建独立混合上下文 - 用 Chrome DevTools → More Tools → Layers 面板确认是否被单独分层
- 避免同时用
mix-blend-mode和opacity，后者会强制创建 stacking context 并拖慢性能
真正难处理的是结构嵌套：一旦父容器本身已触发 stacking context（比如轮播组件用了 translateZ(0)），再加 isolation: isolate 也不一定能救回来——这时候只能重构 DOM，把混合内容提到更高层级，或彻底放弃混合、改用 Canvas 静态合成图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
