如何让header中的logo不受mix-blend-mode: difference影响

核心方案：隔离logo元素的混合模式效果 #

父元素设置mix-blend-mode: difference后，所有子元素默认会继承这个混合规则，你可以通过以下两种方法让logo不受影响，且无需将logo移出.header：

方法一：使用isolation: isolate（推荐）

这是CSS专门用来隔离混合模式的属性，给logo元素添加后，它会脱离父元素的混合上下文，完全保持自身默认样式。

.header {
  mix-blend-mode: difference;
  /* 你的导航栏其他样式：比如position: fixed; width: 100%; 等 */
}

.header .logo {
  isolation: isolate;
  /* 你的logo默认样式：比如width、height、背景图等 */
}

方法二：重置logo的混合模式+匹配背景（兼容旧浏览器）

如果需要适配不支持isolation的旧浏览器，可以给logo强制设置mix-blend-mode: normal，同时给logo添加与页面初始背景一致的背景色，避免混合效果残留。

.header {
  mix-blend-mode: difference;
}

.header .logo {
  mix-blend-mode: normal;
  background-color: #ffffff; /* 替换成你的页面初始背景色 */
  /* 可选：添加padding、border-radius等让背景完全覆盖logo区域 */
}

为什么伪元素遮挡无效？ #

你尝试的:before/:after伪元素属于.header的子元素，同样会继承父元素的mix-blend-mode: difference，所以伪元素的背景也会和页面背景混合，无法真正遮挡logo后方的混合效果。

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