mix-blend-mode 对文字无效，是因为它只与 z 轴更底层的可混合内容作用；需确保文字下方存在非隔离、非纯色的像素（如图片），且未被新层叠上下文隔断。
mix-blend-mode 直接加在文字上没效果？大概率不是写错了，而是混合条件根本没满足。
为什么 mix-blend-mode 对文字没反应？
它不看“上面有什么”，只认“下面有什么”——必须存在 z 轴上更底层的、可参与混合的内容。常见失效场景：
- 父容器是纯白背景 → 文字和白色混合，
multiply变黑、screen不变，看起来像没动 - 图片用
background-image设置在文字父元素上 → 文字和 background 不属于同一层叠上下文，mix-blend-mode不生效（该用background-blend-mode） - 父容器触发了新层叠上下文（比如加了
transform、opacity: 0.99或isolation: isolate）→ 隔断了文字与更下层内容的混合通路 - 文字本身是纯色不透明（如
color: #000+ 无背景）→ 没有 alpha 通道，混合计算失去依据
让文字真正“融进图片”的最小可行结构
关键不是堆样式，而是构造出可混合的层叠关系。推荐用这个 HTML 结构：
<div class="hero"> @@##@@ <h1 class="blend-text">标题</h1> </div>
对应 CSS 必须包含：
-
.hero { position: relative; }—— 确保h1可以绝对定位盖住图片 .hero img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }.blend-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; mix-blend-mode: overlay; }- 别漏掉：文字颜色建议用带 alpha 的值，比如
color: rgba(255, 255, 255, 0.9)，否则纯白在亮区会“消失”
multiply、screen、overlay 怎么选？
不是凭感觉，得看图片明暗分布和你想突出什么：
-
multiply：适合深色文字叠在浅图上，但图里有大片暗区时，文字会发灰甚至不可读 -
screen：亮色文字+暗图组合最稳，高光区域提亮明显，阴影处影响小，适合主标题 -
overlay：对明暗区域都响应，保留细节能力最强，正文多层错位时容错率最高，但中间灰阶可能过渡生硬 - 慎用
difference：反色效果强烈，适合强调对比，但大面积使用易造成视觉疲劳，且在 iOS Safari 14–15 中动画切换会失效
移动端和旧浏览器的实际兼容性雷区
别只查 caniuse 上的绿色勾，真实场景更复杂：
- iOS Safari（尤其 14–15）：
mix-blend-mode在@keyframes动画中切值会直接失效，改用固定模式 + 动态调background-color或opacity - Android WebView（尤其老版本）：
mix-blend-mode可能渲染异常或性能暴跌，建议加降级 fallback（比如用filter: drop-shadow()模拟层次感） - IE 完全不支持，Edge ≤18 也不支持 —— 如果项目需兼容，必须提供纯色文字+半透遮罩的备用方案
- 开启 Chrome DevTools 的 “Rendering → Paint flashing”，真有重叠绘制才说明混合在起作用；没闪，就说明层叠关系断了
最容易被忽略的不是语法，而是混合发生的前提：它依赖真实存在的像素重叠、非隔离的层叠上下文、以及至少一层带透明度的参与方。写十行 mix-blend-mode 不如先确认那张图是不是真在文字底下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
