直接给<img>或容器加filter: grayscale(100%)即可实现完全置灰，0%无效果，中间值支持渐变过渡；需注意浏览器兼容性、父级filter叠加、hover失效及性能优化。
图片置灰用 filter: grayscale() 最直接
直接给 <img> 或包含图片的容器加 filter: grayscale(100%) 就能实现完全置灰，浏览器原生支持，无需 JS 或额外 DOM 操作。这个值是百分比，0% 表示无效果，100% 完全灰度，中间值可做渐变过渡。
grayscale() 在不同浏览器里的兼容性差异
Chrome、Firefox、Safari（≥9）、Edge（≥13）都支持 grayscale()，但 Safari 8 及更早版本只认旧版 WebKit 前缀写法：-webkit-filter: grayscale(100%)。如果你的项目还需兼容 iOS 7/8 或 macOS 10.9 系统，得加上前缀：
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
注意：现代项目通常已不需前缀，但 CI 构建时若用 Autoprefixer，记得配置 browserslist 包含目标环境，否则可能被自动剔除。
hover 时取消置灰却失效？检查层叠和动画中断
常见错误是写成这样：
立即学习“前端免费学习笔记（深入）”；
img { filter: grayscale(100%); }
img:hover { filter: none; }
结果 hover 没反应——因为 filter: none 并非重置所有 filter，它只是清除当前声明的 filter 值，但如果父元素也设置了 filter，子元素会继承并叠加，导致仍显灰。正确做法是显式覆盖：
- 用
filter: grayscale(0%)替代filter: none - 确保没有父级容器同时设了
filter（比如卡片组件加了模糊或阴影） - 如果加了
transition: filter 0.3s，注意 Safari 对filter过渡的支持不稳定，建议限定为transition: filter 0.3s linear避免卡顿
性能敏感场景下慎用 filter 大图或频繁动画
filter 会触发 GPU 加速，对小图影响不大，但遇到以下情况容易掉帧：
- 高清 Banner 图（>2000px 宽）+
grayscale()+hover过渡 - 滚动区域中大量带
filter的图片（如商品列表） - 配合
transform做视差滚动时叠加filter
优化方式：优先用 CSS 类控制开关（避免内联 style 反复计算），或对大图改用 PNG/SVG 灰度版本 + background-image 切换，绕过 runtime 渲染开销。
真正要留意的是：置灰本身很简单，难在嵌套上下文里 filter 的继承与叠加行为，以及移动端低端设备上那几帧卡顿——它们不会报错，但用户会感知到“不跟手”。
