移动端mix-blend-mode失效主因是层叠上下文被意外隔离，须在混合元素的直接父容器设isolation: isolate；推荐multiply、screen、overlay，避开color-dodge等高危值，保持结构扁平以保性能。
移动端 mix-blend-mode 不是“用不了”，而是加了就黑/白/消失/卡顿——问题几乎全出在层叠上下文被意外切断，不是写法错，也不是兼容性差。
为什么文字一加 mix-blend-mode 就变全黑或看不见
根本原因是混合元素的任意上级容器触发了新 stacking context，导致它只能跟一个“透明隔离背景”混合，而不是你预期的图片或视频。浏览器渲染时根本没东西可混，结果就是静默失效。
-
transform: translateZ(0)（轮播、动画常用）会创建新层叠上下文 -
backdrop-filter: blur(4px)（毛玻璃卡片）、opacity: 0.99同样致命 - 看似无害的
position: relative; z-index: 1在弹窗 wrapper 或 Tab 容器里也常是“肇事者” - 父容器没设背景（比如
background: transparent或没声明），mix-blend-mode就无像素可算
必须在直接父容器加 isolation: isolate
这不是可选项，是强制要求。它不改变布局，只告诉浏览器：“请把这层当独立混合单元，别让它被上游 context 隔离。”
- 不能加在
body或更外层——必须是混合元素的**直接父级** - 即使该父容器已有
transform或filter，isolation: isolate仍需显式声明，不会自动继承 - 如果父容器本身是 flex/grid 容器，建议额外加
position: relative，避免隐式 stacking context 干扰
哪些 mix-blend-mode 值在 iOS 和安卓 WebView 上最稳
别贪全。iOS 16.4 之前 plus-lighter 完全不支持；hard-light 在 Safari 有偏色；exclusion 和 color-burn 在部分安卓 WebView 会渲染成纯黑或全白。
-
multiply：深色背景 + 浅色文字时安全，白色变透明，黑色保留 -
screen：镂空文字首选，黑色变透明，适合视频/GIF 背景上的穿透效果 -
overlay：自动根据底色切换multiply或screen，渐变或复杂图上不易丢对比度 - 绝对避开
color-dodge：遇到黑色区域直接过曝成全白，深色主题下 UI 瞬间崩坏
实现自适应图文混合的最小可靠结构
结构越扁平越稳。想让文字“挖空”露出背后图片或视频，关键就三行 CSS，且不能套多层 wrapper。
-
.bg-container必须是文字的直接父级，且自身要有可见背景（图片、渐变或） - 文字颜色必须用纯黑（
#000）或纯白（#fff），中间灰度值（如#666）会导致混合不可控 - 不要给文字加
background-color（除非是rgba半透），否则会遮挡底层，混合失效 - 文字需脱离文档流：
position: absolute或position: relative+ 明确z-index，否则在 flex/grid 中常被跳过混合计算
真正容易被忽略的是：mix-blend-mode 触发的是整块区域的全像素重绘，哪怕只是 top: 1px 动画，浏览器也要重新合成整个 blend 区域。滚动中滥用，iOS Safari 很快掉帧。结构干净、模式克制、层级扁平——这三点比选哪个炫酷效果更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
