filter: grayscale(100%) 可直接使图片变灰，现代浏览器普遍支持，但需注意语法正确、配合 transition 实现平滑过渡、避免嵌套叠加及性能问题。
filter: grayscale() 在现代浏览器里直接生效
绝大多数情况下，filter: grayscale(100%) 就能立刻让图片变灰，不需要 JS 或额外 DOM 操作。它属于 CSS 标准滤镜，Chrome 53+、Firefox 35+、Safari 6.1+、Edge 13+ 都原生支持，连 iOS Safari 9.3 也没问题。
常见错误是写成 filter: grayscale（漏掉括号和值），或者误以为必须配合 transform 才能触发硬件加速——其实只要该元素有合成层（比如设置了 will-change: filter 或父级有 transform），灰度动画就会流畅；否则可能卡顿。
-
grayscale(0%)表示完全彩色，grayscale(100%)表示完全灰度，中间值可做渐变过渡 - 不支持百分比以外的单位（比如
grayscale(1)虽然语法合法，但语义等价于grayscale(100%)，可读性差） - IE 完全不支持
filter滤镜（包括grayscale），别浪费时间加-ms-filter
hover 时渐变灰度要加 transition
只写 filter: grayscale(100%) 不会动，必须显式声明过渡行为。很多人只给 hover 状态加 filter，却忘了在默认状态或 hover 块里补 transition，结果鼠标一划就“啪”一下切过去，毫无缓动。
正确做法是把 transition 放在默认样式里：
img {
filter: grayscale(0%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(100%);
}
- 过渡属性必须写全：用
filter，不能简写成all（性能差且不可控） - 时间值建议 0.2s–0.4s，太短像闪退，太长像卡加载
- 如果同时改 opacity 或 transform，可以合并写成
transition: filter 0.3s, opacity 0.3s
filter 作用在父容器上会批量处理子图
不用给每张 <img> 单独加样式，直接对包裹容器设 filter，里面所有位图（<img>、<svg></svg> 内的 <image></image>、甚至背景图）都会统一变灰。
例如导航栏图标组想整体置灰，只需：
.icon-group {
filter: grayscale(100%);
}
- 注意：文字、边框、阴影不会被灰度影响，只有渲染的像素内容会
- 如果容器内混有需要保持彩色的图片，得单独重置：
img.colorful { filter: grayscale(0%) } - 嵌套 filter 会叠加，比如父级
grayscale(50%)+ 子级grayscale(50%)≠ 100%，实际效果是非线性的，慎用多层
性能敏感场景下避免 filter 触发重绘
频繁修改 filter（比如 scroll 触发的视差灰度）容易引发重绘开销，尤其在低端 Android 设备上。不是所有 filter 都一样重——grayscale() 属于相对轻量的滤镜，但若搭配 blur() 或多个滤镜串联，帧率会明显掉。
- 优先用
will-change: filter提前提示浏览器升层，但别滥用（每个元素都加会吃内存） - 避免在
scroll回调里直接改style.filter，改用requestAnimationFrame节流 - 如果只是开关灰度（非连续值），用 class 切换比内联 style 更利于浏览器优化
- SVG 图标建议直接用
<filter></filter>定义再引用，比 CSSfilter更可控且不触发重排
grayscale() 看似简单，真正麻烦的是它和合成层、过渡时机、嵌套继承之间的隐含互动——这些地方不动手试几次，光看文档根本意识不到。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
