用 mix-blend-mode: difference 实现自动反色需文字设纯黑或纯白、父容器无 isolation 隔离且背景直设；兼容性差，不适用于半透明背景；更可靠方案是 JS 计算背景明度并注入 CSS 变量控制颜色。
用 mix-blend-mode: difference 实现自动反色文字
背景深浅不固定时，硬写 color: white 或 color: black 必然翻车。直接让文字“感知”背景颜色最省事的方案，是利用混合模式的数学特性：difference 会让文字色与背景色做绝对值相减——浅背景（如 #ffffff）下，color: #000000 输出接近白色；深背景（如 #111111）下，同样 color: #000000 输出接近灰色但可读。关键点在于：文字必须用纯黑或纯白，且父容器不能有 isolation: isolate 阻断混合。
- 只对直接父容器设
background，不要嵌套多层背景色容器，否则混合对象错乱 -
mix-blend-mode在 Safari 旧版和 IE 中完全不支持，移动端 iOS 13.4+ 才稳定 - 慎用于半透明背景——
rgba(0,0,0,0.1)和纯黑混合后可能变不可见 - 示例：
.box { background: linear-gradient(45deg, #222, #555); } .box > p { color: #000; mix-blend-mode: difference; }
用 CSS 自定义属性 + color-scheme 做 fallback 控制
mix-blend-mode 是视觉 trick，不改变真实颜色值，无法被屏幕阅读器或打印样式识别。更可控的方式是把背景色明度逻辑交给 JS 判断，再注入 CSS 变量。但注意：CSS 本身没有 luminance() 函数，必须靠 JS 计算后写入 --text-color 变量。
- 监听背景变化（如主题切换、图片加载完成）后，用
getComputedStyle(el).backgroundColor拿到计算后颜色，转为rgb()再算相对明度：(0.299 * r + 0.587 * g + 0.114 * b) / 255 - 明度
时设--text-color: #fff，否则--text-color: #000 - 务必加
@media (prefers-contrast: high)覆盖，高对比模式下强制用实色，绕过混合 - 别在 :root 上批量设变量——每个盒子应独立计算，避免全局污染
为什么不用 background-clip: text + -webkit-text-fill-color: transparent
这个组合看似能“透出背景”，但它只是把文字当蒙版，实际颜色仍是透明，依赖父背景连续且无遮挡。一旦盒子有 border、box-shadow、子元素重叠或使用 transform，文字立刻消失或错位。它本质不是“反色”，而是“镂空”，和需求目标南辕北辙。
- 仅适用于静态单色背景 + 无任何叠加层的标题场景
-
background-clip: text在 Firefox 中需开启layout.css.background-clip-text.enabled标志 - 无法响应背景渐变的局部明暗变化——整段文字统一按起始色判断，中间深色区域字就糊了
真正可靠的边界情况处理
自动换色最脆弱的环节永远在边缘：图片背景、视频封面、用户上传的未知色块。这时候混合模式会失效，JS 计算又拿不到图片像素。唯一稳解是服务端或构建时预分析图片主色/明度，存为 data attribute，比如 data-bg-luminance="0.32"，CSS 用属性选择器匹配：
[data-bg-luminance="0.32"] .text { color: #fff; }
[data-bg-luminance="0.78"] .text { color: #000; }
但这要求你控制内容来源。如果完全开放，就得接受 JS + Canvas 采样首帧像素——而 Canvas 读取跨域图片会触发安全错误，此时 fallback 到默认色才是务实选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
