filter:grayscale无效主因是作用对象错误（如用于background-image而非标签），或受will-change/硬件加速干扰；参数须为0-1小数或百分数，非布尔值；CSS滤镜性能好但粒度粗，局部灰度需SVG或canvas。
filter:grayscale 为什么图片没变灰？
常见现象是写了 filter: grayscale(1) 但毫无反应——大概率是图片被设置了 background-image，而 filter 对背景图无效，只作用于元素自身内容（比如 will-change: transform 或开启了硬件加速，某些旧版 Chrome 会跳过滤镜渲染。
- 确认目标是
- 避免在父级加
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
- 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切换两张图，彻底绕开滤镜计算
实际项目里最容易被忽略的是「灰度只是视觉效果，不影响图片原始数据」——SEO、alt 文本、可访问性（如屏幕阅读器）全都不感知这个变化。如果业务逻辑依赖“是否灰度”，得用 class 控制状态，别只靠样式判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
