mix-blend-mode在渐变/图片背景上不生效，根本原因是混合对象错误——它混合的是当前元素内容与其背后整个堆叠上下文，而非仅父容器background属性；若父容器无背景或触发新层叠上下文（如isolation、transform、opacity），混合即被切断。
mix-blend-mode 在渐变/图片背景上为啥不生效？
根本原因是混合对象错了——mix-blend-mode 混的是“当前元素内容”和“它背后整个堆叠上下文”，不是“和父容器 background 属性”。如果父容器没设背景，或者用了 isolation: isolate、transform、opacity: 0.99 等触发新层叠上下文，混合就被切断了。
常见翻车点：
- 直接给
<img>加mix-blend-mode，但父容器是透明或白色背景 → 混了个空 - 用
background-image做背景，却把文字放在兄弟元素里，中间隔着一个position: relative的空 div → 隔断了混合路径 - 在 iOS Safari 14–15 中对
mix-blend-mode值做动画切换 → 直接静默失效，不是卡顿，是压根不混合
验证是否真有混合：Chrome DevTools → Rendering → 勾选 Paint flashing，看文字/图片区域是否有重叠绘制高亮。
怎么让文字在任意背景色下保持可读？
mix-blend-mode: difference 不是万能反色开关，它是按通道做 |当前色 - 背景色| 运算。白字（#ffffff）在黑底上变白，在灰底（#808080）上产出 #7f7f7f，对比度崩掉。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 初始文字色必须极端：只用
color: #000或color: #fff，禁用#666、#ccc这类中间值 - 别在半透明背景（如
rgba(0,0,0,0.3)）上依赖它——alpha 不参与运算，实际混合对象是父容器最终合成色，不可控 - 确保文字 DOM 位置在背景容器内部，且没被
z-index隔离；若背景来自linear-gradient，必须写在父容器上，不能靠兄弟元素撑开
图片与复杂背景融合的两种可靠路径
想让图片看起来“长进背景里”，不能只靠 mix-blend-mode 单打独斗。关键在构造可混合的图层关系：
- 路径一：用伪元素盖一层单色，设
::before { mix-blend-mode: multiply; background: rgba(255, 0, 100, 0.6); }，再让<img>作为 backdrop —— 此时混合发生在伪元素和图片之间，可控性强 - 路径二：把图片包进带背景色/渐变的容器，再给图片设
mix-blend-mode: screen或overlay—— 混合对象变成图片像素和容器背景，适合统一色调调整 - 绝对避开：
background-blend-mode—— 它只管同一个元素的多层 background，对<img>或文字完全无效
为什么 background-blend-mode 和 mix-blend-mode 总搞混？
根本区别就一句话：background-blend-mode 是“自己身上的多层背景怎么叠”，mix-blend-mode 是“我这个元素和下面所有东西怎么混”。前者作用域在单个元素的 background-image + background-color，后者作用域横跨 DOM 层级。
典型误用：
- 给文字加
background-blend-mode: difference→ 文字没 background，属性直接被忽略 - 想让
<p>文字适配外部容器背景，却去调它的background-blend-mode→ 它连自己的 background 都没有，更别说影响文字颜色 - 用
mix-blend-mode处理两个并列<div>的叠加 → 必须确保它们处于同一层叠上下文，否则兄弟关系不触发混合
最易被忽略的细节：混合效果高度依赖堆叠上下文完整性。一个 transform: scale(0.999) 或 will-change: transform 就可能切断混合链，尤其在滚动容器或 fixed 定位场景里，iOS 上几乎必然失效。
