filter: grayscale() 无效的主因是作用对象错误，它只对 等自身内容生效，不处理 css 背景图；参数必须为数值（如 grayscale(1)），非法写法会被忽略；多滤镜需注意执行顺序，且旧版浏览器和未加载图片也不支持。
直接用 filter 属性就能加灰度，但写错对象、参数或上下文，效果就完全不出现——不是代码没生效，是浏览器压根没渲染那层滤镜。
filter: grayscale() 为什么图片没变灰？
最常见原因是：你把 filter 写在了背景图容器上，比如 div 设置了 background-image，却给它加 filter: grayscale(1)。这无效，filter 只作用于元素自身内容（如 <img> 标签、内联 SVG），不处理 CSS 背景图。
- 确认目标是
<img src="...">，不是div+background-image - 检查父容器是否设置了
will-change: transform或transform: translateZ(0)，旧版 Chrome 会因此跳过滤镜 - IE 完全不支持
filter，Edge 12+ 才开始支持；别指望兼容 IE11 - 如果图片还没加载完成（
loading="lazy"且未进入视口），filter也不会渲染
grayscale() 参数必须带值，不能当开关用
grayscale() 不接受 true、on 或空括号，只认数值：0（原色）、1（完全灰度）或百分数（100%）。中间值可精确控制褪色强度，比如 grayscale(0.6) 比 grayscale(60%) 在部分浏览器中动画更顺。
- 合法写法：
grayscale(0)、grayscale(0.7)、grayscale(100%) - 非法写法：
grayscale(true)、grayscale()、grayscale(on)—— 浏览器直接忽略整条声明 - 和
opacity不同，它没有「开/关」简写，必须带括号和参数
多个滤镜组合时顺序很关键
滤镜函数执行顺序从左到右，结果会层层叠加。比如 blur(2px) grayscale(1) 是先模糊再转灰度；反过来写 grayscale(1) blur(2px)，灰度后的图像再被模糊，视觉差异明显。
- 建议把色彩类滤镜（
grayscale()、sepia()、hue-rotate()）放前面 - 把
blur()放最后，避免模糊干扰其他效果的边界判断 -
drop-shadow()必须压轴，否则阴影也会被前面的灰度或模糊影响 - 所有单位必须规范：
blur()要px，hue-rotate()要deg，漏一个就整条失效
hover 动画卡顿或闪烁的根本原因
直接写 img:hover { filter: grayscale(0); } 在低端设备或多图场景下容易掉帧，因为每次 hover 都触发重绘+GPU 合成，而滤镜本身是 GPU 密集操作。
- 加
transition: filter 0.2s ease-in-out，但避免和transform同时过渡，否则可能触发额外层合成 - 真要保帧率，别依赖实时滤镜：提前生成灰度版图片，用
background-image切换两张图 - 临时提性能可加
will-change: filter，但仅限 hover 前一刻设、离开后移除，别全局写 - 记住：灰度只是视觉层效果，不影响原始图片数据——SEO、alt 文本、屏幕阅读器都感知不到这个变化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
