直接使用 filter: grayscale(100%) 即可实现图片灰度，需带括号和百分比值；hover 平滑过渡须声明 transition: filter 0.3s；父容器设 filter 可批量控制；ie 不支持，注意低端安卓性能与合成层优化。
filter: grayscale(100%) 就能立刻让图片变灰，不需要 JS、不用改 HTML 结构，现代浏览器基本都支持。
直接写 grayscale(100%) 就生效，但括号和值不能漏
常见错误是写成 filter: grayscale（没括号）、filter: grayscale()（没参数）或 filter: gray（已废弃，仅旧版 WebKit 偶尔识别）。必须带括号和有效值，比如 grayscale(0%)、grayscale(50%)、grayscale(100%)。
百分比是唯一推荐写法：grayscale(1) 虽然语法合法，但语义模糊，容易误读；grayscale(0.8) 等小数也合法，但可读性差，建议统一用百分比。
-
grayscale(0%)= 原色，无变化 -
grayscale(100%)= 完全灰度 - 中间值如
grayscale(30%)可做弱化/禁用态提示
hover 时平滑变灰必须显式加 transition
只在 :hover 里写 filter: grayscale(100%)，鼠标移上去会“啪”一下硬切。关键不是 hover 状态，而是默认状态要声明过渡行为。
正确写法：
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> 单独加 class，直接对包裹容器（比如 .gallery、.icon-group）设 filter，里面所有位图都会生效：
.icon-group {
filter: grayscale(100%);
}
注意：filter 只影响渲染的像素内容（<img>、<svg></svg> 里的 <image></image>、CSS background-image），文字、边框、阴影不受影响。
- 如果容器里混有需要保持彩色的图，单独重置：
img.colorful { filter: grayscale(0%) } - 避免嵌套多层
filter：父级grayscale(50%)+ 子级grayscale(50%)不等于 100%，效果是非线性的
IE 不支持 filter，别白费力气加前缀
IE（包括 Edge Legacy）完全不支持 filter，-ms-filter 或 progid:DXImageTransform.Microsoft.BasicImage 这类写法早已失效，2026 年还在兼容 IE 是徒劳的。
真正要关心的是低端 Android 设备上的性能问题：
- 频繁修改
filter（比如 scroll 触发的视差灰度）容易引发重绘开销 - 确保该元素有合成层：可加
will-change: filter，或父级有transform等触发硬件加速的属性 - 如果只是静态置灰（如页面哀悼模式），全局
html { filter: grayscale(100%) }最简单，但要注意它也会影响按钮、文字阴影等非图像内容
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
