透明背景div内的文本能否设置mix-blend-mode混合模式？

该需求完全可以实现，核心是利用mix-blend-mode: exclusion的特性，让导航栏文本和下层滚动的页面内容直接混合，不需要额外的JS逻辑监听滚动位置。 #

核心实现要点 #

• 导航栏必须保持background: transparent，不能有不透明的背景色遮挡下层内容
• 不要给导航栏设置isolation: isolate、小于1的opacity、transform、非none的filter等会触发新堆叠上下文的属性，否则文本的混合效果只会在导航栏内部生效，无法和下层页面内容混合
• 建议给导航栏文本设置基础色为白色，exclusion模式下和各类下层颜色的对比度表现最优

完整代码示例 #

HTML结构 #

<!-- 固定顶部导航栏 -->
<nav class="fixed-nav">
  <span class="nav-item">首页</span>
  <span class="nav-item">产品中心</span>
  <span class="nav-item">解决方案</span>
  <span class="nav-item">关于我们</span>
</nav>

<!-- 下层滚动内容 -->
<main class="page-content">
  <div class="section section-white">白色背景区域</div>
  <div class="section section-black">黑色背景区域</div>
  <div class="section section-blue">蓝色背景区域</div>
</main>

CSS样式 #

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 32px;
  background: transparent;
  z-index: 999;
}
.nav-item {
  margin-right: 32px;
  font-size: 18px;
  font-weight: 500;
  mix-blend-mode: exclusion;
  color: #fff;
}
.page-content {
  padding-top: 60px;
}
.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.section-white {
  background-color: #fff;
  color: #000;
}
.section-black {
  background-color: #000;
  color: #fff;
}
.section-blue {
  background-color: #2563eb;
  color: #fff;
}

常见问题排查 #

如果混合效果不生效，优先检查以下两点：

• 导航栏是否意外创建了独立堆叠上下文，可通过浏览器开发者工具的「图层」面板查看
• 若必须给导航栏添加backdrop-filter等属性，可以把mix-blend-mode: exclusion加到.fixed-nav上，而不是单独加在文本上，注意此时导航栏内所有元素都会应用混合效果

exclusion模式的实际表现为：文本颜色会和下层颜色做差值计算，下层为黑色时文本显示白色，下层为白色时文本显示黑色，下层为彩色时显示高对比度的互补色，完全满足滚动时文本始终清晰可读的需求。

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