`mix-blend-mode` 失效常因元素背景透明导致混合计算无参照，需显式设置非透明背景色才能正确呈现差异混合效果。
在使用 mix-blend-mode（如 difference、exclusion 或 overlay）实现动态文字可见性时，一个常见却容易被忽略的关键点是：被应用混合模式的元素自身必须拥有明确的、非透明的背景（background-color 或 background）。否则，其默认 transparent 背景会使浏览器无法执行有效的像素级混合运算——尤其当父容器或层叠上下文缺乏足够色彩信息时，文字可能完全“消失”。
为什么文字会消失？
CSS 混合模式（mix-blend-mode）的工作原理是将当前元素的每个像素与其下方堆叠上下文中的所有内容进行数学运算（如 difference 计算为 |A − B|）。但如果 .header 元素本身背景透明，且其下方没有可参与混合的不透明层（例如未包裹在具有背景的容器中，或 z-index 层级关系混乱），那么它实际是在与「空」或「透明画布」混合，结果往往趋近于全黑/全白/不可见，尤其在浅色或纯色背景下表现明显。
正确做法：提供可靠的混合参照
✅ 必须为应用 mix-blend-mode 的元素显式声明背景色（哪怕只是极浅/极暗的半透色）：
.header {
position: fixed;
top: 10vh;
left: 0;
width: 100%;
z-index: 100;
mix-blend-mode: difference;
background-color: rgba(0, 0, 0, 0.01); /* 关键：非透明背景，极低透明度避免遮挡 */
padding: 0.5rem 1rem;
}⚠️ 注意事项：
- 不要依赖父容器背景“透过来”作为混合源——mix-blend-mode 只作用于该元素自身内容与其 下层堆叠上下文 的交集，而非父元素背景；
- 确保 .header 与其他内容（如 .fp-container-*）处于同一层叠上下文，或通过 isolation: isolate 显式创建隔离上下文以避免意外混合干扰；
- 若需文字始终高对比可见（如深色/浅色背景自适应），difference 是合理选择，但务必配合可靠背景色 + 合理字体颜色（如白色文字在 difference 下对深色背景变亮、对浅色背景变暗）。
完整可运行示例
<div class="blending-group"> <h1 class="header">Header</h1> <div class="fp-container-1"></div> <div class="fp-container-2"></div> </div>
* { margin: 0; }
body { font-family: 'Roboto', sans-serif; }
/* 关键：header 必须有背景 */
.header {
position: fixed;
top: 10vh;
width: 100%;
text-align: center;
font-size: 2.5rem;
font-weight: bold;
color: white;
mix-blend-mode: difference;
background-color: rgba(0, 0, 0, 0.001); /* 不可省略！ */
z-index: 100;
}
.fp-container-1 {
height: 100vh;
background-color: white;
}
.fp-container-2 {
height: 100vh;
background-color: #2a56c6;
}✅ 总结：mix-blend-mode 不是“自动适配背景”的魔法属性，而是严格依赖视觉堆叠层级与像素值的计算工具。添加一行 background-color（哪怕近乎透明）即可解决 90% 的“文字消失”问题。 开发时建议用 DevTools 检查元素 computed background 是否为 transparent，及时修正。
