`mix-blend-mode` 依赖父容器或自身背景参与混合运算，若元素背景为透明（默认值），则混合失效导致文字“消失”；解决关键是显式设置不透明的 `background-color`。

mix-blend-mode 是一个强大的 CSS 属性，可用于创建动态文字效果——例如让标题在深色和浅色背景上自动反色显示（如 difference 或 exclusion 模式）。但一个常见误区是：仅给文本元素设置 mix-blend-mode，却忽略其背景参与混合的必要性。

CSS 混合模式（如 difference, multiply, screen）的工作原理是：将当前元素的像素值与其下方堆叠上下文中的背景内容进行数学运算。如果该元素自身背景为 transparent（这是

、 等块级元素的默认值），且其父容器也无背景，则实际“下方”可能只有空白的 或 html>（通常也是透明的），导致混合结果趋近于全黑/全白/不可见——表现为文字“消失”。

✅ 正确做法是：为启用 mix-blend-mode 的元素显式声明一个非透明的 background-color（哪怕只是极浅/极暗的色块），使其拥有可参与混合的底层像素。例如：

.header {
  position: fixed;
  top: 10vh;
  width: 100%;
  z-index: 1000;
  mix-blend-mode: difference;
  background-color: rgba(255, 255, 255, 0.01); /* 极淡白，视觉不可见但参与混合 */
  /* 或使用不透明色（如 cadetblue），确保混合有依据 */
}

⚠️ 注意事项：

• 不要将 mix-blend-mode 直接设在 或根元素上，它会影响所有后代，易引发意外叠加；
• 确保 .header 与背景容器（如 .fp-container-1 / .fp-container-2）处于同一层叠上下文（同级或合理 z-index），否则混合可能跨层级失败；
• 若需更鲁棒的“背景无关可见性”，可结合 text-shadow（如 text-shadow: 0 0 8px #000, 0 0 8px #000;）作为降级方案；
• mix-blend-mode 在部分旧版浏览器（如 IE）中不支持，生产环境建议添加渐进增强逻辑。

总结：mix-blend-mode 不是“自动适配背景”的魔法开关，而是一个像素级运算工具——它的效果严格取决于“当前元素背景”与“其下一层内容”的对比。只要记住：设 blend，必设 background，就能避开 90% 的“文字消失”问题。