如何在HTML页面实现区域颜色过滤？保留指定颜色并滤除其他色彩

CSS 快速实现（无JS依赖） #

利用CSS的backdrop-filter和mix-blend-mode组合，可快速实现「仅保留某色，其余转黑白」的效果，无需编写JavaScript。

示例1：仅保留红色 #

<style>
.content-container {
  position: relative;
  width: 400px;
  height: 300px;
  /* 放置需要过滤的彩色内容，如背景图或子元素 */
  background: url('colorful-content.jpg') center/cover;
}

.red-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 将后方内容转为黑白 */
  backdrop-filter: grayscale(1);
  /* 叠加红色背景，通过混合模式还原红色区域 */
  background: #ff0000;
  mix-blend-mode: screen;
}
</style>

<div class="content-container">
  <!-- 过滤层覆盖在内容上方 -->
  <div class="red-filter"></div>
</div>

示例2：仅保留黄色，其余转黑白 #

.yellow-filter {
  position: absolute;
  inset: 0;
  backdrop-filter: grayscale(1);
  background: #ffff00;
  mix-blend-mode: color;
}

原理：backdrop-filter: grayscale(1)将滤镜层后方的所有内容转为黑白，再通过目标颜色的背景配合混合模式，让原本属于该颜色的区域还原色彩，其余区域保持灰度。

Canvas 精准控制方案 #

如果CSS混合模式的精度达不到需求（比如需要自定义颜色阈值），可以用Canvas逐像素处理内容，实现更精准的过滤效果。

示例：仅保留红色，其余转为黑白 #

<style>
.container {
  position: relative;
  width: 400px;
  height: 300px;
}
.target-content {
  width: 100%;
  height: 100%;
}
#filter-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="container">
  <img class="target-content" src="colorful-image.jpg" alt="需要过滤的内容">
  <canvas id="filter-canvas"></canvas>
</div>

<script>
const canvas = document.getElementById('filter-canvas');
const ctx = canvas.getContext('2d');
const content = document.querySelector('.target-content');

// 同步Canvas尺寸与内容尺寸
canvas.width = content.width;
canvas.height = content.height;

// 绘制原始内容到Canvas
ctx.drawImage(content, 0, 0);

// 获取像素数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;

// 自定义红色阈值（可按需调整）
const redRange = {
  minR: 140, maxR: 255,
  minG: 0, maxG: 100,
  minB: 0, maxB: 100
};

// 遍历处理每个像素
for (let i = 0; i < pixels.length; i += 4) {
  const r = pixels[i];
  const g = pixels[i+1];
  const b = pixels[i+2];
  
  // 判断当前像素是否属于红色范围
  const isTargetColor = r >= redRange.minR && r <= redRange.maxR &&
                        g >= redRange.minG && g <= redRange.maxG &&
                        b >= redRange.minB && b <= redRange.maxB;
  
  if (!isTargetColor) {
    // 转为黑白：计算灰度值
    const gray = 0.299 * r + 0.587 * g + 0.114 * b;
    pixels[i] = gray;
    pixels[i+1] = gray;
    pixels[i+2] = gray;
  }
  // Alpha通道保持不变
}

// 将处理后的像素放回Canvas
ctx.putImageData(imageData, 0, 0);
</script>

如果需要除黄色外转为黑白，只需修改阈值判断部分：

// 自定义黄色阈值
const yellowRange = {
  minR: 180, maxR: 255,
  minG: 180, maxG: 255,
  minB: 0, maxB: 100
};

// 判断逻辑改为是否是黄色
const isTargetColor = r >= yellowRange.minR && r <= yellowRange.maxR &&
                      g >= yellowRange.minG && g <= yellowRange.maxG &&
                      b >= yellowRange.minB && b <= yellowRange.maxB;

注意：如果目标内容是动态的（比如动画、交互元素），需要用requestAnimationFrame定时重新绘制Canvas，才能实时更新过滤效果。

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