mix-blend-mode: difference 通过RGB通道绝对值相减实现视觉反色，需文字与背景相邻图层、父容器无isolation/opacity/filter干扰、文字仅用纯黑或纯白；中灰背景对比不足，不支持IE及旧版Safari。
mix-blend-mode: difference 能让文字“看起来”自动反转，但它不是真在检测颜色，而是靠像素级差值运算强行出高对比效果；用对了省事，用错了连 Safari 都不给你面子。
mix-blend-mode: difference 为什么有时完全没反应
90% 的失效都卡在 DOM 结构或层叠上下文上：
- 文字和背景不在同一父容器内（比如背景设在
body，文字在.card），必须给文字容器加isolation: isolate - 父容器用了
opacity、filter或transform，会隐式创建新层，切断混合链路 - 文字被包在多个嵌套
div里，而其中某一级有position: relative+z-index，也会打断相邻图层关系 - 背景用了
background-image但叠加了半透明遮罩（如rgba(0,0,0,0.1)），difference会跟整张图算差值，结果发灰、发晕、边缘噪点
文字该用什么颜色才稳定
别乱试灰色或主题色——它只对纯黑或纯白稳定输出可读反色：
- 固定用
color: #000000：深背景下变亮，浅背景下变暗，视觉上就是“自动反色” - 固定用
color: #ffffff：效果对称，但某些中灰背景（如#888）下可能对比不足 - 绝对不要用
#666、hsl(200, 20%, 50%)这类中间调，difference运算后极易糊成一片 - 文字不能带
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: background提前提示渲染引擎
真正容易被忽略的是 stacking context 的隐式创建——哪怕只是给父容器加了个 opacity: 0.99，都可能让混合失效。动手前先检查 computed styles 里的 isolation 和 will-change 状态。
