mix-blend-mode: difference 不能定义永远反转的颜色，其效果依赖混合层级；必须用 isolation: isolate 开启混合上下文，并配合 position: relative 和 z-index: -1 才能生效。
mix-blend-mode: difference 本身不能“定义一个永远反转的颜色”，它只是让文字像素和背景像素做逐通道相减（|R₁−R₂|, |G₁−G₂|, |B₁−B₂|），视觉上近似反色——但这个效果严重依赖图层关系、颜色纯度和 stacking context。真想让文字“永远跟着背景反”，必须主动控制混合层级，isolation: isolate 是关键开关，不是可选项。
为什么直接写 mix-blend-mode: difference 大概率失效
常见错误现象：文字没变化、颜色发灰、深色背景上反而变暗、换浏览器就消失。
根本原因不是语法错，而是混合未生效：
- 父容器没设
position: relative或transform，导致伪元素::before的z-index: -1无效 - 文字用了
color: rgba(0,0,0,0.8)—— 半透明会先和父背景预合成，再参与difference，结果发污 - 背景是
background-color，而文字在默认 stacking context 中，两者根本不在同一混合层级，difference找不到“背景像素”可减 - 父容器加了
opacity或filter，悄悄创建了新 stacking context，把文字和背景隔开了
正确写法：用 isolation: isolate 显式开启混合上下文
isolation: isolate 的作用不是“隔离”，而是告诉浏览器：“这个容器要参与混合运算，请别把它当成普通层叠盒子”。没有它，mix-blend-mode 在多数嵌套结构中会被静默忽略。
标准结构如下：
section {
position: relative;
isolation: isolate; /* 关键！必须加在这里 */
background-color: #222;
}
section::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: inherit;
z-index: -1;
}
section p {
color: #000; /* 必须不透明纯色 */
mix-blend-mode: difference;
}
注意点：
-
isolation: isolate要加在**文字和伪背景的共同父容器**上，不是加在body或根元素 - 伪元素
::before必须用z-index: -1，且父容器需有position: relative（否则z-index不生效） - 文字颜色只能是
#000、#fff这类无 alpha 的纯色；currentColor可用，但前提是它本身不带透明度
mix-blend-mode: difference 的颜色陷阱与替代方案
纯黑 #000 和纯白 #fff 混合最可靠；中间灰阶如 #888 会产出不可控的灰绿、灰紫等异常色，这不是 bug，是算法必然结果。
如果你需要语义化、可预测的“反色”（比如深色模式下确保文字始终可读），别依赖 difference：
- 用 CSS 自定义属性配对声明：
--text: #1a1a1a; --text-inverted: #e6e6e6;，配合@media (prefers-color-scheme: dark) - 对图标或简单图像，
filter: invert(100%)更稳定，但注意它不支持linear-gradient背景，Safari 对 video/canvas 的 invert 也有延迟 - 若必须动态计算反色，可用 JS 解析
getComputedStyle(el).backgroundColor得到rgb()值，手动算255 - R等，再设回color
真正难的从来不是写对那一行 mix-blend-mode，而是确认文字和背景是否真的在同一混合层里——isolation: isolate 是开关，z-index: -1 是布线，position: relative 是地线，三者缺一不可。漏掉任意一个，difference 就只是个安静的无效声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
