滚动时如何让固定头部中的图片呈现下方内容的反色？

你要的效果可以通过CSS的mix-blend-mode属性实现，核心是利用混合模式让Logo颜色与下方背景自动取反。以下是具体实现步骤：

核心原理 #

使用mix-blend-mode: difference（或exclusion，效果更柔和），该模式会计算元素颜色与下方背景色的差值，自动生成反色效果。需要确保头部为透明背景，让Logo直接与页面内容混合。

完整代码示例 #

HTML结构 #

<!-- 固定头部 -->
<header class="fixed-header">
  <img src="your-logo.svg" alt="公司Logo" class="logo">
</header>

<!-- 页面内容区块（示例不同颜色） -->
<section class="content-block block-dark">深色区块</section>
<section class="content-block block-light">浅色区块</section>
<section class="content-block block-red">红色区块</section>
<section class="content-block block-blue">蓝色区块</section>

CSS样式 #

/* 固定头部：透明背景，悬浮在页面上方 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 2rem;
  background-color: transparent; /* 必须透明，否则混合模式作用于头部背景 */
  z-index: 999;
}

/* Logo样式：单色（推荐黑色），设置混合模式 */
.logo {
  display: block;
  width: 140px; /* 根据你的Logo尺寸调整 */
  mix-blend-mode: difference; /* 关键属性，实现反色混合 */
}

/* 页面内容区块（仅示例用，根据你的实际页面调整） */
.content-block {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
}

.block-dark { background-color: #1a1a1a; }
.block-light { background-color: #f5f5f5; color: #333; }
.block-red { background-color: #e74c3c; }
.block-blue { background-color: #3498db; }

关键注意事项 #

• Logo必须为单色：推荐使用黑色SVG/PNG，这样混合模式才能准确计算反色；如果你的Logo是多色，需要先简化为单色版本。
• 头部背景必须透明：如果头部有背景色，mix-blend-mode会作用于头部背景，而非下方页面内容。
• 浏览器兼容性：mix-blend-mode支持Chrome、Firefox、Safari、Edge等现代浏览器，IE不支持。
• 层级调整：确保头部的z-index足够高，能悬浮在页面内容上方，但不要设置过高影响其他交互元素。

如果需要更精细化的控制（比如只在特定区块触发反色），可以结合JavaScript监听滚动位置，判断Logo下方的元素颜色，动态切换Logo的mix-blend-mode或直接替换Logo颜色，但纯CSS方案已经能满足大部分场景需求。

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