如何使用JavaScript获取页面指定位置的全局CSS background-color

实现方案 #

优先选你提到的第一种思路「直接获取y=70px绝对位置的像素颜色」，该方案可以兼容纯色、渐变、背景图等所有场景，颜色获取精度最高。
核心逻辑是通过Canvas绘制当前视口的快照，提取指定坐标点的像素值即可，完整代码如下：

// 节流函数，避免滚动事件频繁触发导致性能问题
const throttle = (func, delay = 100) => {
  let timer = null;
  return (...args) => {
    if (timer) return;
    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, delay);
  };
};

// 获取指定视口坐标的像素颜色
const getColorAtPoint = (x, y) => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  // 绘制当前视口内容
  ctx.drawImage(document.documentElement, 0, 0, canvas.width, canvas.height);
  
  // 提取像素值，返回rgba格式字符串
  const pixel = ctx.getImageData(x, y, 1, 1).data;
  return `rgba(${pixel[0]}, ${pixel[1]}, ${pixel[2]}, ${pixel[3]/255})`;
};

$(window).on("scroll", throttle(() => {
  const selector = $(".selector");
  // x坐标取视口中间即可，你也可以根据需求调整
  const targetX = window.innerWidth / 2;
  const targetY = 70; // 固定取视口往下70px位置
  const pointColor = getColorAtPoint(targetX, targetY);
  // 赋值给导航栏背景
  selector.css('background-color', pointColor);
}));

注意事项 #

• 如果页面存在跨域的图片资源，需要给对应img标签加上crossorigin="anonymous"属性，否则Canvas会被跨域资源污染，无法读取像素值。
• 如果对性能要求极高，可以把节流的延迟参数适当调大，或者监听滚动结束事件再执行颜色获取逻辑。
• 如果你不想用Canvas方案，可以用document.elementFromPoint(targetX, targetY)获取该坐标下的元素，再读取元素的background属性，但该方案无法准确识别渐变、多层半透明叠加、背景图等场景，不匹配你当前的需求。

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