如何根据元素所在背景（非自身背景）动态改变元素颜色？

这种随背景自动变色的效果，核心是利用CSS的mix-blend-mode属性实现的，你提到的网站就是用了这个方案。

核心原理 #

mix-blend-mode: difference会计算前景色与下方背景色的亮度差值：白色前景在深色背景下会呈现浅色，在浅色背景下会呈现深色，刚好达成"随背景变色"的视觉效果。

代码示例（文字/SVG通用） #

以固定在视口的logo为例：

<!-- 滚动的背景容器 -->
<div class="page-background">
  <!-- 你的logo -->
  <div class="site-logo">R</div>
</div>

.site-logo {
  color: #ffffff; /* 固定白色作为前景色 */
  mix-blend-mode: difference; /* 开启差值混合模式 */
  position: fixed; /* 让logo固定，随背景滚动 */
  font-size: 3rem;
  padding: 1.5rem;
  margin: 0;
}

.page-background {
  height: 200vh;
  /* 用渐变背景测试效果，实际替换成你的页面内容 */
  background: linear-gradient(to bottom, #1a1a1a, #f5f5f5);
}

如果是SVG图标，只需给SVG的fill设置为白色，再添加mix-blend-mode: difference即可，逻辑完全一致。

可选补充方案 #

如果需要更直接的颜色反转，可以用filter: invert(1)，但这种方式是直接反转元素自身颜色，不如mix-blend-mode贴合背景的过渡自然。

注意事项 #

• 旧浏览器（如IE）不支持mix-blend-mode，需要做降级处理；
• 确保logo的父容器没有设置非透明的background-color，否则混合的是父容器背景而非页面背景；
• 如果是文字效果，别和background-clip: text混淆——后者是基于元素自身背景变色，而我们需要的是基于页面背景，所以mix-blend-mode才是正确选择。

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