必须先声明初始filter状态（如grayscale(0%)）并加transition，再通过:hover等触发变化；需兼容-webkit-filter；filter对background-image无效，仅作用于标签；性能敏感时可加will-change: filter。
必须显式声明初始 filter 状态
只在 :hover 或 JS 切换时写 filter: grayscale(100%)，动画不会触发——浏览器不知道从哪开始过渡。关键动作是：先给 img 设默认态。
-
img { filter: grayscale(0%); transition: filter 1s ease; }（彩色起始） - 再配合状态变化，比如
img:hover { filter: grayscale(100%); }，就能实现 1 秒渐变 - 若想默认黑白、悬停恢复彩色，就把初始值换成
grayscale(100%)，hover 改为grayscale(0%)
别漏掉 Safari 和旧内核的 -webkit-filter
Safari ≤15.6、部分 Android 微信 X5 内核（如 Android 6–8）仍不识别标准 filter，直接忽略。真机测试不能跳过前缀。
- 完整写法应为：
img { -webkit-filter: grayscale(0%); filter: grayscale(0%); transition: -webkit-filter 1s ease, filter 1s ease; } - 注意：transition 要同时声明两个属性，否则 Safari 只过渡
-webkit-filter，其他浏览器只过渡filter - 现代 Chrome/Firefox/Edge 已无需前缀，但加了不冲突，推荐保留
background-image 不生效，必须用 ![]()
标签
filter 对 CSS 背景图（background-image）完全无效。这是最常被卡住的点。
- 如果 HTML 是
<div style="background-image: url(...)"></div>，加filter没反应 - 必须改用
<img src="...">，才能被滤镜作用 - 若无法改结构，只能用 SVG 滤镜或 Canvas 替代，一行 CSS 解决不了
性能敏感场景要加 will-change
频繁触发或长列表中大量图片做滤镜过渡，可能掉帧。尤其在滚动容器里（overflow-y: scroll）更明显。
- 加
will-change: filter;提前告知浏览器该元素将变化，启用硬件加速 - 但别滥用：只加在真正需要过渡的元素上，避免全页面加导致内存占用升高
- 慎用组合滤镜（如
grayscale(100%) blur(2px) contrast(120%)），简单grayscale()性能最好
<img> 形式存在——这三个点任何一个出错，都会让过渡静默失败，而不是慢或卡。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
