如何限制CSS mix-blend-mode仅在黑白范围内生效适配logo颜色

架构老林

2026-10-3

问题原因说明

原有mix-blend-mode: difference是和下层所有像素做差值运算，下层为彩色时自然会生成非黑白的异常颜色，无法满足仅在黑白背景下切换logo颜色的需求，建议更换为「区块背景标记+滚动监听动态切换样式」的可控方案，完全符合你的需求。

实现步骤

1. 页面区块打标

给所有纯白背景的内容区块添加自定义属性标识，黑色、彩色、图片背景的区块无需额外处理：

<!-- 白色背景区块 -->
<section data-bg-type="light">
  页面内容
</section>
<!-- 黑色/彩色/图片背景区块 -->
<section>
  页面内容
</section>

2. 调整CSS样式

移除原头部的mix-blend-mode配置，新增logo样式切换类：

/* 固定头部基础样式 */
.fixed-header {
  position: fixed;
  width: 100%;
  height: 80px;
  background-color: transparent;
  z-index: 999;
}
/* logo默认样式：保持PNG原本的白色，适配黑色/彩色/图片背景 */
.fixed-header .logo {
  filter: invert(0);
}
/* 白色背景下的logo样式：转为黑色 */
.fixed-header.on-light-bg .logo {
  filter: invert(1);
}

3. 添加滚动监听逻辑

使用性能更好的IntersectionObserver监听头部和白色背景区块的交叉状态，动态切换头部类名：

const header = document.querySelector('.fixed-header');
const lightBgSections = document.querySelectorAll('[data-bg-type="light"]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      header.classList.add('on-light-bg');
    } else {
      header.classList.remove('on-light-bg');
    }
  });
}, {
  // 检测范围和头部高度对齐，只判断头部覆盖的区域背景类型
  rootMargin: '-80px 0px 0px 0px',
  threshold: 0
});

// 监听所有白色背景区块
lightBgSections.forEach(section => observer.observe(section));