mix-blend-mode 对纯文字无效，需通过 background-clip: text 或容器包裹使其成为混合源；screen/multiply 最易见效，overlay/color-dodge 更富表现力但敏感；性能开销大，需谨慎升层；Safari 兼容性差，须结合 @supports 与 JS 检测降级。
mix-blend-mode 在文字上根本不会生效？
因为 mix-blend-mode 默认只对「非背景层」且「有绘画内容」的元素起作用，而纯文字（<span> 或 <p>）如果没有设置 background、box-shadow 或其他可混合图层，浏览器就认为它“没东西可混合”——结果就是看起来完全没反应。
- 必须让文字本身成为“混合源”：给文字加一层带颜色/渐变的
background-clip: text+-webkit-text-fill-color: transparent，再套上mix-blend-mode - 或者更直接：把文字放在一个有背景的容器里，让容器设
mix-blend-mode，文字作为子元素参与混合（但要注意层级和 stacking context） - 常见错误是直接给
<h1>写mix-blend-mode: multiply却没配背景或遮罩，结果白屏或无变化
哪些 blend mode 对文字效果最可控？
screen 和 multiply 最容易出效果，但行为相反：multiply 让浅色文字在深底上“沉下去”，screen 让深色文字在浅底上“透出来”。真正有艺术感的往往是 overlay 和 color-dodge，但它们对输入对比度极度敏感。
-
overlay：保留高光与阴影，中间调反差拉满，适合叠加在纹理图或渐变背景上 -
color-dodge：会让底层颜色“提亮”文字区域，用不好会过曝，建议配合opacity: 0.7控制强度 -
exclusion虽冷门，但在灰阶背景上能产生微妙的蚀刻感，比difference更柔和
为什么加了 mix-blend-mode 后页面闪动或卡顿？
因为 mix-blend-mode 强制触发合成层（compositing layer），尤其当它用在滚动区域、动画元素或大量文字块上时，GPU 要反复重算混合像素——这不是 CSS 变量或 transform 那种轻量级优化能绕过的。
- 避免在
body或全屏section上直接设mix-blend-mode，改用包裹一层<div class="blend-layer"> - 如果文字要动效，别对文字本身做
transform+mix-blend-mode组合，优先用will-change: transform提前升层 - Safari 对
mix-blend-mode的硬件加速支持不稳定，遇到闪烁可加backface-visibility: hidden强制创建独立图层
兼容性底线和降级方案怎么写？
Firefox 和 Chrome 支持良好，Safari 从 v16.4 开始支持大部分模式，但 iOS Safari 旧版本（≤15.6）仍会忽略 mix-blend-mode。不能靠 @supports 完全兜底，因为部分 Safari 会“假装支持”却渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 基础降级：用
@supports not (mix-blend-mode: multiply)给文字设默认颜色或阴影 - 更稳妥的是用 JS 检测：
getComputedStyle(el).mixBlendMode !== 'normal'，再动态加类 - 切记：不要用
background-blend-mode替代，它是作用于背景图层内部混合，和文字无关
混合模式不是滤镜，它依赖上下文；同一段 CSS 在不同背景、不同父级 z-index 下表现可能截然不同——调效果时永远以真实背景图为基准，而不是在白底上盲调。
