mix-blend-mode: difference 并非检测背景色后切换文字色，而是通过RGB通道绝对值相减实现视觉反色；其生效需满足文字与背景相邻图层、父容器无isolation/opacity/filter干扰、文字仅用纯黑或纯白三前提，中灰背景易致对比不足，且不支持IE及旧版Safari。
mix-blend-mode: difference 能让文字“看起来”随背景深浅自动翻转，但它不是真正在检测颜色，而是靠图层混合运算强制出高对比效果——用对了省事，用错了连 Safari 都不给你面子。
为什么difference有时完全没反应
90% 的失效都卡在 DOM 结构或层叠上下文上：
- 文字和背景不在同一父容器内（比如背景设在
body，文字在.card），必须给文字容器加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）下可能对比不足 - 绝对不要用
#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: mix-blend-mode提前提示
真正难的从来不是写对那一行 mix-blend-mode: difference，而是判断什么时候不该用它——尤其是当背景来自用户上传、CMS 动态注入或主题变量计算时，JS 计算亮度再切 CSS 变量反而更可控。
