如何通过CSS在HTML中将RGB图像单通道转为灰度图显示？

可以通过两种纯CSS方案实现，不需要JavaScript：

方案一：使用CSS Filter Matrix（直接作用于图像） #

利用CSS的filter: matrix()自定义颜色变换，直接将红通道的值复制到绿、蓝通道，让三个通道值一致，从而生成标准灰度图。

<img src="https://placekitten.com/200/287" alt="示例图片" class="red-channel-grayscale">

.red-channel-grayscale {
  /* 矩阵参数说明：将绿、蓝通道的取值来源设为红通道 */
  filter: matrix(1, 0, 0, 0, 0,
                 1, 0, 0, 0, 0,
                 1, 0, 0, 0, 0,
                 0, 0, 0, 1, 0);
}

这个矩阵的作用逻辑：

• 红通道（R）保留原始值：R' = 1*R + 0*G + 0*B
• 绿通道（G）替换为红通道的值：G' = 1*R + 0*G + 0*B
• 蓝通道（B）替换为红通道的值：B' = 1*R + 0*G + 0*B
• 透明度（A）保持不变

方案二：混合模式+灰度滤镜（嵌套容器实现） #

基于你已掌握的mix-blend-mode知识，配合grayscale滤镜，先提取红通道的红色图像，再转成灰度：

<div class="red-channel-wrapper">
  <img src="https://placekitten.com/200/287" alt="示例图片">
</div>

.red-channel-wrapper {
  background-color: #ff0000;
}
.red-channel-wrapper img {
  mix-blend-mode: multiply;
  /* 将红色调的通道图像转为灰度 */
  filter: grayscale(1);
}

两种方案都能得到标准灰度的红通道内容，区别在于方案一无需额外容器，代码更简洁；方案二更贴合你已有的技术认知，逻辑更直观。

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