关于mix-blend-mode的实现需求：文本在白背景变黑其余背景变白

要实现“文本在白色背景显示黑色，在其他颜色/图片背景显示白色”的效果，利用mix-blend-mode: difference就能轻松做到，以下是调整后的实现方案：

核心思路 #

mix-blend-mode: difference的混合规则是：两个颜色的RGB值分别相减取绝对值。白色（RGB(255,255,255)）与白色背景混合时，结果为黑色（RGB(0,0,0)）；与非白色背景混合时，结果会是和背景反差强烈的颜色（深色背景下接近白色），刚好符合需求。

调整后的代码 #

.header-title {
  padding: 20px;
  font-size: 85px;
  font-weight: 900;
  position: relative;
  display: inline-block;
  color: white;
  font-family: 'Bahnschrift Condensed', sans-serif;
  mix-blend-mode: difference;
  /* 用drop-shadow替代text-shadow，避免阴影参与混合导致颜色异常 */
  filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.5));
}

/* 若文本需要独立的白色背景区域，添加伪元素 */
.header-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: -1;
}

关键说明 #

• 移除了原代码中的z-index: 999和margin-right: -202%，这两个属性和颜色切换逻辑无关，可根据布局需求自行决定是否保留。
• 用filter: drop-shadow()替代text-shadow：text-shadow会参与混合运算，导致阴影颜色混乱；drop-shadow是对元素整体添加阴影，不参与混合，效果更符合预期。
• 伪元素::before的作用是为文本单独提供白色背景，如果你的白色背景是父容器自带的，可以删除这个伪元素样式。

内容的提问来源于stack exchange，提问作者Виктор Минчев