实现HTML标题文字颜色随动态背景逐帧反色

一、基础反色实现（CSS快速搞定） #

直接用CSS的mix-blend-mode: difference属性，这是最简便的方案，浏览器会自动让文字颜色与下方背景实时反色，包括GIF的每一帧更新。

修改你的CSS，给主标题添加样式：

h1 {
  color: white; /* 基础色，difference模式会基于此和背景计算反色 */
  mix-blend-mode: difference;
  position: relative;
  z-index: 1; /* 确保文字在背景之上 */
}

原理：difference混合模式会计算文字颜色和背景颜色的差值，白色与任何颜色混合都会得到反色（255 - 背景色值 = 反色）。GIF每帧更新时，浏览器会自动重新计算混合结果，实现实时同步。

二、单个字母级别的反色控制 #

如果需要对单个字母单独调整（比如间距、独立动画），可以把每个字母拆成独立的<span>元素，每个span继承mix-blend-mode属性后，会基于自身下方的背景区域反色。

添加一段JS拆分字符：

// 拆分h1文字为单个span元素
const heading = document.querySelector('h1');
const text = heading.textContent;
heading.innerHTML = text.split('').map(char => `<span>${char}</span>`).join('');

可额外给span添加样式（可选）：

h1 span {
  margin: 0 2px; /* 自定义字母间距 */
  /* 可单独给某个span加动画或样式 */
}

三、像素级精确反色（Canvas实现） #

如果需要自定义反色逻辑（比如忽略特定颜色、调整反色强度），可以用Canvas逐像素计算反色：

修改后的HTML： #

<canvas id="headingCanvas"></canvas>
<button style="font-family: Courier;" id="toggleButton" onclick="toggleIncrement()">Click to activate Duckie-fier</button>
<br>
<img src="https://i.kym-cdn.com/photos/images/original/002/429/796/96c.gif">

JS实现： #

// 原计数逻辑保留（修正递增间隔为1秒）
var isIncrementing = false;
var intervalId;
var number = 0;
var toggleButton = document.getElementById("toggleButton");

function toggleIncrement() {
  if (!isIncrementing) {
    isIncrementing = true;
    intervalId = setInterval(() => number++, 1000);
    toggleButton.innerHTML = "Click to deactivate Duckie-fier";
  } else {
    isIncrementing = false;
    clearInterval(intervalId);
    toggleButton.innerHTML = "Click to activate Duckie-fier";
  }
}

// Canvas反色核心逻辑
const canvas = document.getElementById('headingCanvas');
const ctx = canvas.getContext('2d');

// 适配窗口大小
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = 100; // 标题区域高度
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

// 加载背景GIF
const bgImg = new Image();
bgImg.src = 'https://media3.giphy.com/media/pR1ztNFfPS7wa2eYfY/200w.gif?cid=6c09b9523w4yesgqef8dno4mrrz98shnzgkv7dhgl4dqd9qp&rid=200w.gif&ct=g';
bgImg.crossOrigin = 'anonymous'; // 处理跨域图片

// 实时绘制反色文字
function drawHeading() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制背景到Canvas用于像素读取
  ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  
  // 临时Canvas获取文字区域
  const tempCanvas = document.createElement('canvas');
  const tempCtx = tempCanvas.getContext('2d');
  tempCanvas.width = canvas.width;
  tempCanvas.height = canvas.height;
  tempCtx.font = '36px Courier';
  tempCtx.textAlign = 'center';
  const text = `Number of Duckies: ${number}`;
  tempCtx.fillText(text, canvas.width/2, 50);
  const tempData = tempCtx.getImageData(0, 0, canvas.width, canvas.height).data;
  
  // 逐像素计算反色
  for (let i = 0; i < data.length; i += 4) {
    if (tempData[i + 3] > 0) { // 仅处理文字区域像素
      data[i] = 255 - data[i];     // 红色通道反色
      data[i + 1] = 255 - data[i + 1]; // 绿色通道反色
      data[i + 2] = 255 - data[i + 2]; // 蓝色通道反色
      data[i + 3] = tempData[i + 3]; // 保留文字透明度
    }
  }
  
  ctx.putImageData(imageData, 0, 0);
  requestAnimationFrame(drawHeading); // 同步GIF帧更新
}

bgImg.onload = drawHeading;

关键注意事项 #

• 跨域图片：如果背景GIF来自外部域名，需确保服务器设置了CORS允许跨域访问，否则Canvas无法读取像素数据。
• 性能：CSS方法性能最优，Canvas方法需注意优化（比如缩小像素遍历范围），避免浏览器卡顿。
• 原代码中setInterval(incrementNumber, 0)会导致高频触发递增，建议改为1000实现每秒递增逻辑。

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