mix-blend-mode生效需同时满足三条件：元素与背后内容视觉重叠、同属一个层叠上下文、背后有可混合内容；否则加了也无效，如父容器设opacity: 0.99或用background-image却未合并声明。
mix-blend-mode 不是“给元素上色”的开关，它只在元素与背后内容**真实重叠且同属一个层叠上下文**时才起作用；直接加在 <img alt="如何使用CSS3属性mix-blend-mode实现图层混合" > 或文字上没反应，八成是混合前提没满足。
为什么 mix-blend-mode 加了却没效果？
三个硬性条件缺一不可：
- 元素必须和背后的“底物”（父容器背景、兄弟元素、
body背景色）存在视觉重叠 —— 比如没设position: relative或z-index，文字可能根本没盖在图片上 - 混合元素和底物必须在**同一个层叠上下文**里 —— 父容器用了
isolation: isolate、transform、opacity: 0.99等都会悄悄切断混合链 - 背后必须有可混合的内容 ——
<img alt="如何使用CSS3属性mix-blend-mode实现图层混合" >默认下面只有纯白或透明，没东西可混；background-image本身不参与mix-blend-mode，得换background-blend-mode
常见翻车点：div { opacity: 0.99; } > img { mix-blend-mode: multiply; } → 父容器已创建新 stacking context，混合失效。
怎么让 <img alt="如何使用CSS3属性mix-blend-mode实现图层混合" > 正确参与混合？
关键不是调图片本身，而是构造出它能“混”的环境：
立即学习“前端免费学习笔记（深入）”；
- 把
<img alt="如何使用CSS3属性mix-blend-mode实现图层混合" >放进一个带背景色/渐变的容器里，比如div { background: linear-gradient(to right, #ff0000, #0000ff); } - 用伪元素叠加调色层：
div::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(255, 0, 100, 0.6); mix-blend-mode: multiply; z-index: 1; } - 确保图片和伪元素都设
position: absolute或relative，且没有父级触发隔离 - Chrome DevTools → Rendering → 勾选 “Paint flashing”，看是否真有重叠绘制区域
别用 background-image 替代 <img alt="如何使用CSS3属性mix-blend-mode实现图层混合" > 后还硬套 mix-blend-mode —— 那是 background-blend-mode 的地盘。
multiply / screen / difference 怎么选？
名字容易误导，实际表现取决于基色（背后）和混合色（当前）的数值关系：
-
multiply：逐通道相乘，深色吃色强，浅色几乎不变 → 适合压暗高光、叠加阴影色块 -
screen：等价于“去黑留亮”，纯黑区域完全透明 → 实现文字镂空透出视频背景最稳，文字颜色必须设#000 -
difference：亮区反色，暗区保留原色 → 最适合文本跨黑白渐变背景时自动翻色，比如h1 { color: #fff; mix-blend-mode: difference; }
半透明元素参与混合时，会先合成自身 alpha，再算混合值，结果常比预期更灰 —— 若需精准控制，优先用不透明色+调节 opacity 替代。
iOS 和低端 Android 上的兼容性雷区
iOS 14–15 是重灾区，动画中切 mix-blend-mode 值大概率失效：
- 绝对不要在
@keyframes里动态改mix-blend-mode—— 改用固定模式 + 动态调background-color或opacity - 避免给混合元素加
will-change: transform，它会强制创建新图层，中断混合 - 移动端做镂空文字时，必须加
will-change: transform到父容器（不是文字本身），并设pointer-events: none防交互遮挡 - 千元安卓机可能掉帧或闪烁，上线前务必在真机测试
最易被忽略的一点：混合效果高度依赖色彩空间和渲染管线，同一段 CSS 在 Safari、Chrome、Firefox 下可能呈现细微但可感知的差异 —— 别只在 Chrome 里调到“看起来对”就发版。
