`mix-blend-mode` 使文本与背景混合，但若元素自身无背景（默认透明），则无法正确计算混合效果——需为应用该属性的元素显式设置不透明背景色，才能实现预期的高对比度显示效果。
当您希望固定定位的文本（如页眉标题）在不同颜色背景（如白色、蓝色区块）上始终保持高可视性时，mix-blend-mode: difference 是一个巧妙的 CSS 方案。它通过颜色差值运算，自动反转文本颜色：在浅色背景上变深，在深色背景上变亮。但关键前提被广泛忽略：mix-blend-mode 的计算依赖于元素自身的背景参与叠加——若目标元素（如 .header）未设置 background-color，其默认为 transparent，导致“无基底可混”，最终文本可能完全消失或呈现不可预测的灰白。
✅ 正确做法是：为启用 mix-blend-mode 的文本元素显式声明一个非透明背景色（即使该背景在视觉上不期望被看到，也可设为半透或极小尺寸，但绝不能留空）。例如：
.header {
position: fixed;
top: 10vh;
width: 100%;
z-index: 10;
mix-blend-mode: difference;
background-color: rgba(0, 0, 0, 0.01); /* 极低透明度黑，提供混合基底 */
/* 或使用 solid 色：background-color: #1a1a1a; */
}同时，确保 .header 与其他背景容器（.fp-container-1, .fp-container-2）处于同一层叠上下文（stacking context），避免因 z-index 或 isolation 干扰混合行为。推荐将所有参与混合的元素包裹在同一个设置了 isolation: isolate 的父容器中，以明确隔离混合范围：
Header
⚠️ 注意事项：
- 不要对 或 html> 直接设 mix-blend-mode，易引发全页渲染异常；
- difference 模式在纯白/纯黑背景上效果最稳定；若背景含渐变或图片，建议配合 background-clip: text + color: transparent 做增强方案；
- 所有参与混合的元素必须是同级或重叠关系，父子嵌套且无 isolation 会中断混合链。
总结：mix-blend-mode 不是“魔法开关”，而是基于像素级颜色运算的视觉工具。它的可靠运行始于一个简单的承诺——给文本一个可被计算的背景基底。
