CSS+Javascript实现初始灰度的图片点击后恢复为彩色的方法

下面提供两种常用实现方式，可根据你的项目场景选择： #

方案1：纯CSS实现（无JS依赖） #

利用label关联隐藏checkbox的状态切换控制样式，实现成本最低：

代码示例 #

HTML部分：

<label class="grayscale-img-container">
  <input type="checkbox" hidden>
  <img src="你的图片路径" alt="图片说明">
</label>

CSS部分：

/* 初始灰度样式 */
.grayscale-img-container img {
  filter: grayscale(1);
  cursor: pointer;
  transition: filter 0.3s ease; /* 可选，添加过渡动画更流畅 */
}
/* 勾选后切换为彩色 */
.grayscale-img-container input:checked + img {
  filter: grayscale(0);
}

特点 #

• 无需编写JS代码，适配静态页面场景
• 默认支持来回切换：点击变彩色，再次点击恢复灰度

方案2：JavaScript实现（灵活度更高） #

如果后续需要叠加其他交互逻辑，推荐用JS控制类名实现：

代码示例 #

HTML部分：

<img class="toggle-gray-img" src="你的图片路径" alt="图片说明">

CSS部分：

.toggle-gray-img {
  filter: grayscale(1);
  cursor: pointer;
  transition: filter 0.3s ease;
}
/* 彩色状态类 */
.toggle-gray-img.is-colorful {
  filter: grayscale(0);
}

JS部分：

const imgs = document.querySelectorAll('.toggle-gray-img');
imgs.forEach(img => {
  img.addEventListener('click', function() {
    // 支持来回切换
    this.classList.toggle('is-colorful');
    // 如果只需要点击一次永久变彩色，替换为以下代码即可：
    // this.classList.add('is-colorful');
  })
})

特点 #

• 可自定义交互逻辑，适配复杂业务场景
• 支持单次生效/来回切换两种模式

兼容性提示：如果需要适配低版本Webkit内核浏览器，可给filter属性添加-webkit-前缀，例如-webkit-filter: grayscale(1);

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