如何用CSS实现类似耐克官网的滚动反转叠加效果？

针对你观察到的耐克官网按钮和SVG Logo随背景反转的效果，常见的实现方式有以下几种，其中官网大概率用的是第一种：

• CSS 混合模式（mix-blend-mode）
  这是最简洁且性能最优的方案，无需监听滚动事件，直接通过元素与背景的颜色混合实现反差效果。核心是给目标元素设置mix-blend-mode: difference或exclusion属性：

/* 按钮和SVG容器的样式 */
.header-join-btn, .site-logo {
  mix-blend-mode: difference;
  color: #fff; /* 基础纯色，配合混合模式生效 */
}

对于SVG，需要确保内部图形的填充色为纯色（比如白色），再给SVG容器添加上述属性即可。这种模式会自动让元素颜色与背景色形成互补反差，背景亮时元素暗，背景暗时元素亮，你找不到颜色切换的JS或动态CSS代码很正常——因为它完全靠CSS混合模式实现，没有修改颜色值。

• 滚动监听 + 类名切换
  如果需要更精准控制颜色，可通过监听滚动事件，判断当前视口内背景区域的明暗，给元素切换预设的颜色类：

// 监听滚动事件
window.addEventListener('scroll', () => {
  const targetElements = document.querySelectorAll('.header-join-btn, .site-logo');
  // 示例：通过获取当前滚动位置对应的背景元素亮度判断明暗
  const currentSection = document.elementFromPoint(window.innerWidth/2, 100);
  const bgColor = getComputedStyle(currentSection).backgroundColor;
  const isDarkBg = /* 转换bgColor为亮度值，判断是否为深色背景 */;
  
  targetElements.forEach(el => {
    el.classList.toggle('text-light', isDarkBg);
    el.classList.toggle('text-dark', !isDarkBg);
  });
});

对应的CSS预设类：

.text-light { color: #fff; }
.text-dark { color: #000; }

• 滤镜反转（filter: invert()）
  针对纯色元素，也可通过filter: invert(1)实现颜色反转，结合滚动监听切换滤镜类：

.color-invert {
  filter: invert(1);
}

这种方式适合简单纯色元素，但如果元素本身有复杂色彩，反转后效果可能不符合预期。

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