mix-blend-mode: difference 通过 |r₁−r₂|、|g₁−g₂|、|b₁−b₂| 实现自动反色，仅当文字为纯黑/白且背景为直系父容器不透明纯色时可靠生效；需避免 isolation、transform、opacity 等隐式创建 stacking context 的属性干扰。
直接用 mix-blend-mode: difference，文字设纯黑或纯白即可生效——但前提是背景必须是父容器的直接 background，且不能有 isolation: isolate 阻断混合上下文。
为什么 mix-blend-mode: difference 能自动反色
它对每个颜色通道做绝对值相减：|R₁ − R₂|, |G₁ − G₂|, |B₁ − B₂|。所以：
- 文字设
color: #fff（255,255,255），背景是纯黑（0,0,0）→ 输出接近 (255,255,255)，即白字显白 - 同样文字
color: #fff，背景是纯白（255,255,255）→ 输出接近 (0,0,0)，即白字显黑 - 中间灰阶（如 #888）会导致输出色偏紫/棕，可读性下降，所以只推荐纯黑/纯白作为文字色
常见失效场景和修复方式
不是代码写错，而是混合上下文被意外破坏：
- 父容器用了
isolation: isolate或transform（如translateZ(0)）→ 会创建新 stacking context，阻断与背景的混合，删掉即可 - 背景色写在孙子容器上，而文字在孙辈 →
mix-blend-mode只和**直系父容器**的 background 混合，必须把 background 提到文字的直接父级 - 背景用了
rgba(0,0,0,0.1)这类半透明色 → 和纯黑文字混合后可能趋近不可见，改用不透明色或换用background-blend-mode+ 多层渐变兜底 - 用了
backdrop-filter或filter→ 会干扰混合结果，需测试是否叠加异常
兼容性和移动端注意事项
这个方案在 Safari 上有明确时间线约束：
- iOS 13.4+、macOS Safari 13.1+ 才稳定支持
mix-blend-mode - 旧版 Safari（iOS 13.3 及更早）和所有 IE 版本完全不识别该属性，会回退为默认文字色
- Android WebView 表现基本一致，但部分定制 ROM 的 Chromium 内核版本偏低（如 Android 8.x 默认 WebView 69），建议加
@supports (mix-blend-mode: difference)做特性检测 - 滚动中动态背景（如视差图）下，文字反色依然实时生效，无需 JS 干预
真正容易被忽略的是 stacking context 的隐式创建——哪怕只是给父容器加了个 opacity: 0.99，都可能让混合失效。动手前先检查 computed styles 里的 isolation 和 will-change 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
