mix-blend-mode: difference 失效主因是层叠上下文或 DOM 结构问题：文字与背景须同父容器，否则需加 isolation: isolate；父容器含 opacity/filter/transform 会隐式创建新层切断混合；背景禁用半透明遮罩或复杂渐变/图片，文字仅宜用纯黑或纯白以确保稳定反色效果。
mix-blend-mode: difference 能让文字“看起来”随背景自动反色，但它不是真正在检测颜色，而是对像素做 |background - text| 运算——用对了省事，用错连 Safari 都不渲染。
为什么 mix-blend-mode: difference 有时完全没反应
90% 的失效都卡在层叠上下文或 DOM 结构上：
- 文字和背景不在同一父容器内（比如背景设在
body，文字在.header），必须给文字容器加isolation: isolate - 父容器用了
opacity、filter或transform，会隐式创建新层，切断混合链路 - 文字被包在多层
div里，其中某一级有position: relative+z-index，也会打断相邻图层关系 - 背景用了
background-image叠加半透明遮罩（如rgba(0,0,0,0.1)），difference会跟整张图算差值，结果发灰、边缘噪点
difference 下文字该用什么颜色
它只对纯黑或纯白稳定输出可读反色：
- 固定用
color: #000000：深背景下变亮，浅背景下变暗，视觉上就是“自动反色” - 固定用
color: #ffffff：效果对称，但中灰背景（如#888）下可能对比不足（|136 − 255| = 119→ 浅灰） - 绝对不要用
#666、hsl(200, 20%, 50%)这类中间调，运算后极易糊成一片 - 文字不能带
text-shadow或backdrop-filter，这些会引入额外图层干扰混合
哪些背景能用，哪些千万别碰
这个模式本质是数学差值，不是 AI 识别：
立即学习“前端免费学习笔记（深入）”；
- ✅ 纯色背景（
#1a1a1a、rgb(240,240,240)）最稳 - ✅ 缓和线性渐变（如
linear-gradient(to right, #222, #333)）勉强可用 - ❌ 复杂径向渐变、多色叠加渐变——差值结果不可预测，常出现色带断裂
- ❌ 图片背景（哪怕加了
background-blend-mode）——边缘毛刺、光晕、局部失色 - ❌ 半透明背景（
rgba(0,0,0,0.3)）——difference会穿透到下一层，反的不是你想要的色
兼容性和可访问性底线
它跑得动，不代表它合格：
- Safari 15.4+ 支持，但旧版（尤其 iOS 15.2 及更早）直接忽略该声明，回退到默认文字色
- 不触发浏览器无障碍 API，屏幕阅读器看不到“当前文字为白色”，只读内容本身
- WCAG 对比度需手动校验：哪怕看着清楚，也要用
axe DevTools或contrast-ratioCLI 测真实值（例如#000在#eee上只有 3.7:1，不达标） - 动画切换背景时，
difference渲染有延迟，可能出现短暂文字消失或错色，建议加will-change: mix-blend-mode提前提示
最易被忽略的一点：它无法处理半透明背景叠加后的实际感知亮度。例如 rgba(0,0,0,0.5) 叠在白色 body 上，视觉是深灰，但 difference 仍按纯黑计算，结果文字变黑——反而不可读。
