咨询：实现滚动时文字与静态背景图重叠部分变为白色的效果

我懂你想要的效果——当黑色文字滚动过那张固定的半透明黄色背景图时，重叠的部分直接变成纯白色，而不是现在mix-blend-mode: difference算出来的那种黄黑混合色对吧？咱们来调整一下实现方式，你当前的问题出在半透明背景和difference模式的颜色计算逻辑上，换个思路就能完美解决。

修正后的完整代码 #

<main>
  <div>
    <h2>This is a test</h2>
  </div>
  <div>
    <h2>This is another</h2>
  </div>
</main>

main {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg width='697' height='880' viewBox='0 0 697 880' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 880L383.35 0H697L313.65 880H0Z' fill='%23FDB714' fill-opacity='0.6'/%3E%3C/svg%3E");
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: scroll;
}

div {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

h2 {
  font-size: 180px;
  font-weight: bold;
  font-family: arial;
  /* 核心调整：用背景裁剪+混合模式实现颜色切换 */
  color: transparent;
  background: 
    linear-gradient(white, white),
    url("data:image/svg+xml,%3Csvg width='697' height='880' viewBox='0 0 697 880' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 880L383.35 0H697L313.65 880H0Z' fill='%23FDB714' fill-opacity='1'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-position: center center;
  background-size: 100%;
  background-blend-mode: screen;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 0 black;
}

关键调整说明 #

• 抛弃了原来的mix-blend-mode: difference和复杂滤镜，改用背景裁剪+固定背景的方案，直接精准控制文字在不同背景上的颜色
• background-attachment: fixed是核心：让文字的背景图和<main>的固定背景图完全同步，滚动时文字和背景的重叠关系不会出错
• background-blend-mode: screen：让白色渐变只在黄色SVG的区域显示，在白色底色上会被“抵消”，不会干扰黑色文字的显示
• text-shadow: 0 0 0 black：负责在非重叠的白色背景区域显示黑色文字，完全不影响重叠区域的白色效果
• 文字背景里的SVG我改成了不透明（fill-opacity='1'），这样screen模式能输出纯净的白色；<main>里的背景保持原有的半透明0.6，不影响视觉效果

如果需要兼容更旧的浏览器，background-clip: text的-webkit-前缀已经能覆盖绝大多数场景，现代浏览器都原生支持这个属性。

内容来源于stack exchange