mix-blend-mode: difference 不能定义永不重合的颜色，仅做RGB通道差值运算（|R₁−R₂|等），可读性取决于初始色与背景色数值关系；失效主因是层叠上下文断裂，须配合isolation: isolate、纯色背景及#000/#fff初始色才能稳定生效。
mix-blend-mode: difference 本身不能“定义永远不会重合的颜色”，它只是做通道级减法运算，结果是否可读完全取决于初始色和背景色的数值关系。真要让文字在任意背景上都清晰可见，得组合控制混合上下文、初始色值和层级结构。
为什么 mix-blend-mode: difference 单独写大概率失效
常见错误现象：文字颜色没变化、变灰、深色背景上反而更暗、换浏览器就消失。
根本原因不是语法错，而是混合没生效：
- 父容器没设
position: relative或transform，导致文字层无法正确参与混合 - 文字用了
color: rgba(0,0,0,0.8)—— 半透明会先与父背景预合成，再参与difference，结果发污 - 背景是纯
background-color，而文字在默认 stacking context 中，两者不在同一混合层级 - 父容器加了
opacity或filter，悄悄创建了新 stacking context，把文字和背景隔开了
必须加 isolation: isolate 才能启用混合上下文
isolation: isolate 不是“隔离样式”，而是显式告诉浏览器：“这个容器要参与混合运算，请别把它当普通盒子处理”。没有它，mix-blend-mode 在多数嵌套结构中会被静默忽略。
立即学习“前端免费学习笔记（深入）”；
正确结构示例：
div {
background-color: #222;
isolation: isolate; /* 关键开关 */
position: relative; /* 为 z-index 提供定位上下文 */
}
div p {
color: #fff; /* 必须用高对比初始色，避免 #ccc 这类中间值 */
mix-blend-mode: difference;
}注意：z-index: -1 对文字本身无效，但可用于伪元素模拟“底层背景”；实际中更可靠的做法是确保文字 DOM 位置就在背景容器内部，且无中间隔离层。
彩色背景下 difference 容易出低对比杂色
mix-blend-mode: difference 的计算逻辑是 |R₁−R₂|, |G₁−G₂|, |B₁−B₂|，不是智能识别后换色。所以：
- 白字
#ffffff在红底#ff0000上变成#00ff00（绿色），可读但不“反色” - 灰底
#808080上白字产出#7f7f7f，几乎不可辨 - 渐变或图片背景时，文字不同区域颜色各异，视觉混乱
实操建议：
- 只对纯色或明暗分明的背景依赖该方案
- 避免用
rgba()背景——alpha 不参与差值计算，实际混合对象是父容器最终合成色，行为不可控 - 若背景来自
linear-gradient，确保文字元素没被overflow: hidden或clip-path截断渲染区域
真正可靠的 fallback 是 color-contrast() + 手动降级
color-contrast() 是目前最接近“自动适配”的原生方案，但它仍处于实验阶段，仅 Chromium 111+ 和 Safari 17.4+ 支持：
p {
color: color-contrast(#000 vs white, black); /* 白底选黑，黑底选白 */
}兼容性处理必须做：
- 用
@supports (color-contrast: normal)包裹现代写法 - 降级到固定色值（如
color: #000）或 JS 动态检测背景亮度后切换 class - 不要指望
filter: invert(100%)—— 它作用于整个元素（含边框、阴影），且无法单独控制文字反色强度
复杂点在于：所谓“永远不重合”，本质是放弃绝对反色幻想，转为在可接受范围内控制最小对比度。混合模式提供视觉捷径，但前提是你清楚它算的是什么、在哪算、跟谁算。
