mix-blend-mode: difference 通过RGB各通道逐值相减取绝对值实现像素级混合，在浅色背景上显暗、深色背景上显亮，视觉近似反色；但非语义化黑白切换，纯黑纯白最可靠，中间灰阶易出异常色，需同stacking context且不支持IE及旧版Safari。
mix-blend-mode: difference 为什么能让文字自动反色
它不是“检测背景然后改颜色”，而是让文字像素和背景像素做异或运算（RGB 各通道逐值相减取绝对值），结果在浅色背景上偏暗、深色背景上偏亮，视觉上近似反色。但要注意：这不是语义化的“黑白切换”，而是一种混合模式的副作用。
-
difference对纯黑（#000）和纯白（#fff）最可靠；中间灰阶（如 #888）混合后可能出灰绿、灰紫等意外色 - 必须确保文字和背景在同一个 stacking context，否则混合无效——常见坑是父容器加了
opacity或transform却没意识到它创建了新层 - 不支持 IE 和旧版 Safari（iOS mix-blend-mode 在部分安卓 WebView 里表现不稳定
怎么写才让文字真正“跟着背景反”
直接给文字设 mix-blend-mode: difference 往往失效，因为默认文字在背景之上，但若背景是父元素的 background-color，两者不在同一混合层级。正确做法是把背景“降级”为同层内容元素。
- 用伪元素
::before绘制背景，并设z-index: -1，文字保持默认层叠顺序 - 父容器需设
position: relative，否则z-index: -1无效 - 文字不能有半透明（
color: rgba(0,0,0,0.8)），否则混合结果发灰；必须用不透明纯色（如#000）
div {
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #333;
z-index: -1;
}
div p {
mix-blend-mode: difference;
color: #000; /* 必须不透明 */
}遇到文字发虚、边缘泛彩怎么办
这是 difference 混合在亚像素渲染下的典型副作用，尤其在非整数缩放（如 110%、125%）或 Retina 屏上更明显。本质是 GPU 混合时对字体抗锯齿采样失真。
- 加
-webkit-font-smoothing: subpixel-antialiased可缓解，但仅限 WebKit 内核 - 更稳妥的是避免小字号（
font-size < 16px）使用该方案；14px 以下基本不可控 - 不要对
text-shadow或backdrop-filter元素叠加mix-blend-mode，混合顺序错乱会导致色带
有没有更可控的替代方案
如果只要黑白反差且兼容性优先，CSS 自定义属性 + color-scheme 配合媒体查询更稳；但它是基于系统主题，不是实时响应任意背景色。
立即学习“前端免费学习笔记（深入）”；
- 想响应任意背景？得用 JS 监听背景变化并计算亮度，再切
color—— 但这就脱离了纯 CSS 范畴 -
mix-blend-mode: exclusion效果更柔和，但对中灰背景同样不可靠 - 真正动态适配的工业级方案（如 Dark Mode 切换）几乎都放弃“自动反色”，改用明确的 class 控制两套色值
别低估颜色空间转换的复杂度：RGB 差值混合 ≠ 人眼感知的“反色”。一个 #5a6b7c 背景，difference 出来的未必是可读的亮色，而可能是模糊的蓝灰。实际项目里，手动定义明/暗两套文本色，仍是多数团队的选择。
