直接用filter: grayscale(100%)即可实现图片黑白效果，但必须使用标签而非background-image；hover过渡需声明初始态和transition: filter；参数漏%会降级为grayscale(0)导致失效。
直接用 filter: grayscale(100%) 就行，但必须确保图片是 <img> 标签，不是 background-image —— 后者完全不生效。
为什么写了 grayscale(1) 图片却没变灰？
最常见原因是：你把图片当成了 CSS 背景图，比如写了 div { background-image: url(...); filter: grayscale(1); }。这不会起效，因为 filter 只作用于元素自身内容（如 <img> 的图像流、SVG 或文字），对背景图无效。
- ✅ 正确做法：用
<img src="...">标签加载图片，再对其加filter - ❌ 错误写法：
background-image+filter组合，浏览器直接忽略滤镜 - ⚠️ 隐性陷阱：某些 UI 框架（如 Tailwind 的
bg-[url(...)]）或 CMS 输出默认走背景图，需手动改回<img>
怎么让灰度效果平滑过渡（比如 hover 时变灰）？
关键在于同时定义初始态和过渡规则，不能只在 :hover 里写滤镜。
- 必须显式设置初始
filter值，例如img { filter: grayscale(0); }，否则过渡会跳变 - 过渡属性写成
transition: filter 0.3s ease即可，无需加前缀（现代浏览器已支持） - Safari 旧版本（iOS 12 / macOS 10.14 及更早）不支持
filter过渡，会直接切换；真机测试不可省略 - 避免同时对同一元素加
opacity和filter过渡——两者都触发合成层，GPU 压力翻倍，易卡顿
grayscale() 参数写 1 还是 100%？单位漏了会怎样？
两者等价，但漏掉 % 是致命错误。
-
grayscale(1)和grayscale(100%)效果相同，都是全灰 -
grayscale(100)（没 %）是无效值，浏览器按规范降级为grayscale(0)，图片看起来毫无变化 - 参数范围是
0–1或0%–100%，中间值如grayscale(30%)可做渐进去色 - 别指望它调对比度或亮度——
grayscale()只移除色相，算法由浏览器实现，Safari 渲染通常比 Chrome 更暗、细节更少
真正容易被忽略的是：如果你需要像素级一致的灰度效果（比如品牌视觉验收），grayscale() 不可靠。它不暴露计算逻辑，不同浏览器结果不同，连同一张图在 Safari 和 Chrome 里灰度浓度都可能偏差明显。这时候得切到 SVG 滤镜或 Canvas 手动计算，而不是靠 CSS 省事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
