React中如何实现随鼠标移动的背景图与文字局部颜色混合？

核心思路 #

用CSS混合模式让文字与背景图产生颜色对比变化，同时通过JS监听鼠标事件控制背景图的偏移，实现跟随浮动+文字变色的效果。

具体实现步骤 #

1. 页面结构 #

需要一个容器嵌套背景图和文字，保证文字层级高于背景图：

<div class="container">
  <div class="floating-bg"></div>
  <h1 class="text">示例文字内容</h1>
</div>

2. CSS样式配置 #

• 容器设相对定位，文字和背景图设绝对定位，确保文字覆盖在背景图上方
• 给文字添加mix-blend-mode属性，实现图片覆盖区域的文字颜色反转/对比

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-bg {
  position: absolute;
  width: 600px;
  height: 400px;
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* 避免干扰鼠标事件 */
}

.text {
  position: absolute;
  font-size: 4rem;
  font-weight: bold;
  color: #000;
  mix-blend-mode: difference; /* 核心：文字与背景图混合变色 */
}

3. JS实现鼠标跟随浮动 #

监听容器的鼠标移动事件，计算相对位置后调整背景图的偏移量：

const container = document.querySelector('.container');
const floatingBg = document.querySelector('.floating-bg');

container.addEventListener('mousemove', (e) => {
  const rect = container.getBoundingClientRect();
  // 计算鼠标在容器内的相对比例（0-1）
  const xRatio = (e.clientX - rect.left) / rect.width;
  const yRatio = (e.clientY - rect.top) / rect.height;
  
  // 自定义偏移范围，数值越大浮动幅度越大
  const maxOffset = 100;
  const offsetX = (xRatio - 0.5) * maxOffset;
  const offsetY = (yRatio - 0.5) * maxOffset;
  
  floatingBg.style.transform = `translate(-50%, -50%) translate(${offsetX}px, ${offsetY}px)`;
});

进阶调整说明 #

• 混合模式可选值：difference是最常用的反色效果，还可以尝试exclusion、color-dodge等，根据背景图和文字的基础颜色调整
• 如果需要更精准的局部文字变色（而非全局混合），可以用Canvas实现：通过像素检测判断文字区域是否被图片覆盖，动态修改对应位置的文字颜色，但这种方法复杂度更高，适合需求精细的场景

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