固定定位文本设mix-blend-mode非normal时消失，求背景自适应可见方案

问题原因分析 #

你当前设置mix-blend-mode: difference后文本消失，是因为fixed定位的.header脱离了父级.blending-group的堆叠上下文，它会和body的默认透明背景混合。白色文本与透明背景应用difference混合模式后，视觉上就会消失。

方案1：修复mix-blend-mode的使用 #

要让混合模式生效，需要让固定文本与下方的背景容器处于同一堆叠上下文。给.blending-group设置position: relative，同时给.header添加纯色背景，再对文本应用混合模式：

body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  margin: 0;
}

.blending-group {
  position: relative; /* 创建堆叠上下文，让fixed元素参考它 */
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  top: 10vh;
  z-index: 1;
  background-color: white; /* 给容器加背景，作为混合的基底 */
}

.header h1 {
  margin: 0;
  mix-blend-mode: difference; /* 仅对文本应用混合模式 */
  color: white; /* 文本基色，混合后会随背景反转 */
}

.fp-container-1 {
  height: 100vh;
  background-color: white;
}

.fp-container-2 {
  height: 100vh;
  background-color: blue;
}

对应的HTML调整：

<div class="blending-group">
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="fp-container-1"></div>
  <div class="fp-container-2"></div>
</div>

这样文本会根据下方背景颜色自动反转，在白色背景显示深色，蓝色背景显示浅色，保证可读性。

方案2：文本增强（阴影/描边） #

如果不想用混合模式，最直接的方法是给文本添加多层阴影或描边，让它在任何背景下都有清晰轮廓：

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  top: 10vh;
  z-index: 1;
}

.header h1 {
  margin: 0;
  color: white;
  /* 多层阴影实现黑白轮廓，适配任何背景 */
  text-shadow: 
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}

或者用CSS描边（仅webkit内核支持，兼容性稍差）：

.header h1 {
  margin: 0;
  color: white;
  -webkit-text-stroke: 1px black;
}

方案3：裁剪蒙版实现文本背景对比 #

用background-clip: text让文本显示对比色背景，同时隐藏容器背景，这样文本会自动适配下方背景：

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  top: 10vh;
  z-index: 1;
}

.header h1 {
  margin: 0;
  /* 用黑白渐变作为文本背景，裁剪到文本区域 */
  background: linear-gradient(to right, black, black) 0 0/100% 100% no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /* 让文本透明，显示背景 */
  mix-blend-mode: difference; /* 混合后与下方背景形成对比 */
}

内容的提问来源于stack exchange，提问作者TripleBaconCheeseburger