直接用 filter: grayscale() 配合 JS 控制类名可稳定切换灰度，但需避开元素作用域、滤镜传递链中断、background-image 无效、单位缺失、过渡未声明默认态、Safari 前缀、内联样式干扰、图片未加载、移动端事件兼容及浏览器灰度算法差异等关键问题。
直接用 filter: grayscale() 配合 JavaScript 控制类名就能稳定切换，不需要改图片、不依赖 Canvas 或 SVG，但必须避开几个关键干扰点。
为什么加了 grayscale(100%) 图片还是彩色？
最常见原因是滤镜没作用到正确元素上：
- 写了
body { filter: grayscale(100%) }，但弹窗、<video>、<dialog>仍彩色——得写在html元素上才真正全局生效 -
<img>被包在transform、will-change或opacity < 1的父容器里，会切断滤镜传递链 - 用了
background-image而非<img src="">——filter对背景图完全无效 - 参数漏了
%，比如写成grayscale(100)（没 %），浏览器按规范降级为grayscale(0)，等于没加
hover 切换要同时定义初始态和过渡
只在 :hover 里写滤镜，动画不会平滑——因为浏览器不知道从哪开始过渡：
- 必须显式声明默认状态：
img { filter: grayscale(100%); } - 加上过渡：
transition: filter 0.3s ease;（现代浏览器无需前缀） -
img:hover { filter: grayscale(0%); }才能实现黑白→彩色的渐变效果 - Safari ≤15.6 仍需
-webkit-filter前缀，真机测试不能跳过
点击切换必须用 JS 记状态，纯 CSS 不行
:checked 或 :target 无法可靠触发图片状态切换，得靠 JS：
立即学习“前端免费学习笔记（深入）”；
- 监听
click，用classList.toggle('grayscale')最稳妥 - 避免内联样式干扰：如果
<img style="filter: ...">已存在，CSS 类会被忽略——要么删掉style，要么改用element.style.filter = '' - 图片未加载完成就绑定事件，可能导致首次点击无响应，建议用
img.addEventListener('load', ...)或延迟初始化 - 移动端需注意
touchstart替代click的兼容性，不过 Chrome/Firefox/Safari 当前版本已统一支持click
真正容易被忽略的是灰度算法本身：Chrome 和 Safari 对同一张图渲染出的灰度浓度不同，grayscale(100%) 不保证像素级一致。如果品牌视觉验收要求严格，就得切到 SVG 滤镜或 Canvas 手动计算，而不是指望一行 CSS 解决所有问题。
