filter:grayscale无效主因是作用对象错误（如用于background-image而非标签），或受will-change/硬件加速干扰；参数须为0-1小数或百分数，非布尔值；CSS滤镜性能好但粒度粗，局部灰度需SVG或canvas。
filter:grayscale 为什么图片没变灰？
常见现象是写了 filter: grayscale(1) 但毫无反应——大概率是图片被设置了 background-image，而 filter 对背景图无效，只作用于元素自身内容（比如 <img alt="CSS如何让图片变灰_使用filter:grayscale滤镜效果" > 标签或内联 SVG）。另外，如果父容器有 will-change: transform 或开启了硬件加速，某些旧版 Chrome 会跳过滤镜渲染。
- 确认目标是
<img src="..." alt="CSS如何让图片变灰_使用filter:grayscale滤镜效果" >，不是 CSS 背景图 - 避免在父级加
transform: translateZ(0)或will-change，除非真需要性能优化 - IE 完全不支持
filter，Edge 12+ 才开始支持，别指望兼容 IE11
grayscale 参数值怎么选：0、1 还是百分数？
grayscale() 接收一个数值，代表灰度程度：0 是原色，1（或 100%）是完全灰度。注意它不是布尔开关，中间值可精确控制褪色强度，比如 grayscale(0.6) 常用于悬停渐变过渡。
- 用小数更利于 CSS 动画插值，
grayscale(0.7)比grayscale(70%)在部分浏览器中动画更顺 - 不要写
grayscale(true)或grayscale(on)—— 浏览器直接忽略整条声明 - 和
opacity不同，它没有「开/关」简写，必须带括号和参数
和 SVG filter 或 canvas 处理比，有什么区别？
纯 CSS 的 filter: grayscale 是合成阶段处理，性能好、写法轻量，但控制粒度粗：不能单独调红绿蓝通道，也不能只灰化图片某一块区域。
- 要局部灰度（比如只灰化人脸），得用 SVG
<filter></filter>+<fecolormatrix></fecolormatrix>，或裁剪后用 canvas 处理 - CSS filter 在高 DPI 屏幕下可能轻微模糊，因涉及 GPU 插值；canvas 绘制可保持像素级锐利
- 服务端生成灰度图（如 WebP +
grayscale=on参数）适合首屏关键图，避免客户端计算
hover 变灰时闪烁或卡顿怎么办？
直接写 img:hover { filter: grayscale(1); } 在低配设备上容易掉帧，尤其多图并排时。根本原因是每次 hover 都触发重绘+合成，且滤镜本身是 GPU 密集操作。
立即学习“前端免费学习笔记（深入）”；
- 给图片加
will-change: filter（仅 hover 前一刻设，hover 离开后移除），别全局写 - 配合
transition: filter 0.2s ease-in-out，但避免和transform同时过渡，否则可能触发额外层合成 - 更稳的做法：提前生成灰度版图片，用
background-image切换两张图，彻底绕开滤镜计算
