mix-blend-mode对组件不生效 侧边导航在黑色区块无法正常显示

核心故障点 #

• 混合模式基准色设置错误：原本靠mix-blend-mode: difference实现自适应反色的逻辑完全颠倒。这类差值混合模式的生效规则是：元素最终显示色 = |元素本身设置色 - 下方叠加区域的背景色|。给导航链接设置的本身颜色是纯黑#0D0D0D，计算后会出现：
  • 白色内容区场景：|纯黑 - 纯白| ≈ 纯白，导航和白背景完全融为一体
  • 黑色区块场景：|纯黑 - 纯黑| = 纯黑，导航和黑背景完全融为一体
• 多余的z-index设置：固定定位的侧边导航上设置z-index:1，会在部分浏览器中触发不必要的层叠隔离，打断混合模式的计算链路。

具体修正步骤 #

1. 调整导航链接的基准色：把.sidenav a里的color、border-color从#0D0D0D修改为#ffffff。此时混合计算逻辑会恢复正常：
   • 白色内容区场景：|纯白 - 纯白| = 纯黑，导航显示为黑边黑字
   • 黑色区块场景：|纯白 - 纯黑| = 纯白，导航显示为白边白字
2. 删除.sidenav里多余的z-index:1配置，避免触发层叠隔离。
3. 顺手修正HTML中未闭合的<p>标签，把所有<p>Some text<p>替换为闭合的<p>Some text</p>，减少浏览器解析兼容问题。

备用稳效方案 #

如果不想依赖混合模式实现跨背景显示，可以删掉所有mix-blend-mode相关设置，直接给导航链接设置纯白色文字与边框，搭配低不透明度的黑色外阴影，参考配置如下：

.sidenav a {
  color: #fff;
  border-color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  box-shadow: 2px 0 3px rgba(0,0,0,0.3);
}

这种方案不受层叠规则、浏览器兼容问题的影响，在任何颜色的背景上都能保证导航清晰可辨。

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