如何用mix-blend-mode实现文字与背景的同步滑动变色过渡？

一、实现目标效果的可行方案 #

你的需求是背景从浅灰过渡到绿色时，文字在绿色区域显示白色，浅灰区域显示黑色，过渡过程中部分文字同步变色。以下提供两种可行方案，其中一种适配你提到的mix-blend-mode使用场景：

方案1：使用background-clip:text（直观匹配需求） #

这种方法直接让文字颜色跟随背景渐变，完全符合预期效果：

.text-container {
  position: relative;
  width: 300px;
  height: 50px;
  overflow: hidden;
  background: #FBFBFD;
  border: 1px solid #ccc;
}

.blended-text {
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #000;
}

.text-container::before {
  content: 'Dynamic Text';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background: #21B250;
  -webkit-background-clip: text;
  background-clip: text;
  width: 0%;
  overflow: hidden;
  transition: width 1s ease-in-out;
  z-index: 1;
}

.text-container:hover::before {
  width: 100%;
}

<div class="text-container">
  <span class="blended-text">Dynamic Text</span>
</div>

方案2：使用mix-blend-mode（适配混合模式特性） #

如果必须用mix-blend-mode，可以调整颜色组合利用difference的反色特性实现近似效果：

.text-container {
  position: relative;
  width: 300px;
  height: 50px;
  overflow: hidden;
  background: #000;
  border: 1px solid #ccc;
}

.blended-text {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  mix-blend-mode: difference;
}

.text-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FBFBFD;
  z-index: 1;
  transition: width 1s ease-in-out;
}

.text-container:hover::before {
  width: 0%;
}

注：该方案通过收起浅灰覆盖层露出黑色背景，白色文字经difference混合后显示为白色；若需保留绿色背景，可在伪元素上叠加filter: invert(1)调整颜色输出。

二、问题解答 #

• 能否通过mix-blend-mode实现过渡过程中仅部分文字变色的效果？
  可以实现，但需要调整颜色组合适配预定义的混合模式规则。mix-blend-mode基于固定颜色混合公式工作，需让背景色、文字颜色的组合在混合后输出预期结果，比如上述方案2的方式，或结合滤镜进一步调整。

• 是否可以自定义mix-blend-mode？
  目前CSS标准中没有提供自定义mix-blend-mode的机制，所有可用的混合模式均为浏览器预定义（如difference、multiply、screen等），无法自定义颜色混合计算逻辑。

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