mix-blend-mode在移动端“不生效”或变黑/白，主因是层叠上下文被意外隔离，需在混合元素直接父容器加isolation: isolate；background-blend-mode失效多因background-color与background-image分离声明，须合并为同一background声明并用linear-gradient替代纯色。
mix-blend-mode 在移动端“不生效”或“变黑/变白”，基本不是浏览器不支持，而是 stacking context 被意外隔离；background-blend-mode 失效，90% 是因为 background-color 和 background-image 分开写了。
mix-blend-mode 文字镂空失效：isolation: isolate 必须加在直接父容器
文字用 mix-blend-mode: screen 想“挖空”露出背后图片，结果全黑或不可见——问题不在值选错，而在父级容器触发了新层叠上下文。常见肇事者：transform: translateZ(0)、backdrop-filter: blur(4px)、opacity: 0.99、甚至只是 position: relative; z-index: 1。
修复方式极简但必须精准：
-
.text-hollow的直接父容器（比如.bg-container）必须显式声明isolation: isolate - 不能加在
body或更外层——它只对“自身子元素”生效 - 即使该父容器已有
transform或filter，isolation: isolate仍需手动写，不会继承 - 结构越扁平越稳：避免多层
position: relative套娃
background-blend-mode 不起作用：颜色必须伪装成渐变图层
写 background-color: rgba(0,0,0,0.4); background-image: url(bg.jpg); background-blend-mode: overlay; → 完全无效。因为 background-color 属于填充阶段，background-image 属于纹理阶段，二者根本不在同一图层栈里。
正确做法是把颜色“升级”为图像图层：
- 用
linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))替代纯色声明 - 合并进一条
background声明：background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(bg.jpg); - 图层顺序很重要：逗号前的是底层，想让颜色影响图片，颜色层必须写在前面
- 透明度建议控制在 0.2–0.6 之间；低于 0.15 几乎不可见，高于 0.7 会吃掉图片细节
移动端性能卡顿：mix-blend-mode + transform 是危险组合
给混合文字加 transform: translateZ(0) 或 will-change: transform，本意是启 GPU 加速，结果反而更卡——尤其在中低端安卓机上滚动时掉帧、闪烁。
原因很底层：
-
mix-blend-mode要求与“背后所有内容”实时像素混合，依赖完整合成层通路 -
transform: translateZ(0)会强制创建独立图层，切断该通路，浏览器只能退到 CPU 软合成 - Safari 16.4 前对
mix-blend-mode + position: fixed还有滚动残留 bug，transform会放大这个问题 - 真正有效的优化是减少混合范围：用
isolation: isolate隔离区域，或改用零开销 fallback（如预合成遮罩图）
哪些混合值最稳，哪些该立刻避开
别贪全，移动端兼容性差异大：
- 推荐只用三个：
multiply（深色背景+浅字）、screen（镂空文字首选）、overlay（自动适配明暗，最省心） - 绝对避开：
color-dodge（遇黑过曝成白，深色主题下 UI 瞬间崩坏）、exclusion和color-burn（部分安卓 WebView 渲染为纯黑或全白） -
hard-light在 Safari 有偏色；plus-lighter在 iOS 16.4 之前完全不支持 - 文字颜色必须用纯黑
#000或纯白#fff；中间灰度值（如#666）会导致混合结果不可控
最容易被忽略的点：混合效果是否生效，第一眼要看结构层级是否干净、isolation 是否加对位置、颜色是否被“伪装”成图层——而不是反复调 mix-blend-mode 的值或怀疑浏览器版本。真机调试时，先关掉 overflow: hidden 和 clip-path，它们会无声截断渐变端，导致遮罩边缘发硬或消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
