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 会渲染成纯黑或全白。

Blender Geometry Nodes Script Generator

生成Blender Python (bpy)脚本，该脚本使用node_groups API和GeometryNodeTree接口程序化地创建几何节点修改器树，用于参数化3D资产生成。

下载

• multiply：深色背景 + 浅色文字时安全，白色变透明，黑色保留
• screen：镂空文字首选，黑色变透明，适合视频/GIF 背景上的穿透效果
• overlay：自动根据底色切换 multiply 或 screen，渐变或复杂图上不易丢对比度
• 绝对避开 color-dodge：遇到黑色区域直接过曝成全白，深色主题下 UI 瞬间崩坏

实现自适应图文混合的最小可靠结构

结构越扁平越稳。想让文字“挖空”露出背后图片或视频，关键就三行 CSS，且不能套多层 wrapper。

立即学习“前端免费学习笔记（深入）”；

• .bg-container 必须是文字的直接父级，且自身要有可见背景（图片、渐变或 <video></video>）
• 文字颜色必须用纯黑（#000）或纯白（#fff），中间灰度值（如 #666）会导致混合不可控
• 不要给文字加 background-color（除非是 rgba 半透），否则会遮挡底层，混合失效

实际中最容易被忽略的点是：混合是否生效，和你写的模式值关系不大，而取决于「有没有真实可混合的像素」以及「它们是否处在同一层叠上下文」——哪怕所有样式都对，只要父容器某处悄悄加了个 opacity: 0.99，整个效果就归零。