直接用filter: grayscale(100%)即可实现全灰度，但会作用于整个元素及其子内容（含文字、图标等）；参数需用0%～100%百分比或0～1数值，禁用无单位数字如grayscale(50)。
直接用 filter: grayscale(100%) 就行，现代浏览器全支持，不用 JS、不依赖库，但要注意它会作用于整个元素及其所有子内容（包括文字、图标、伪元素），不是“只灰图片”。
grayscale() 的参数怎么填才不翻车
grayscale() 接收两种写法：0～1 的数值，或 0%～100% 的百分比。别混用，比如 grayscale(50) 是错的——它会被当成 50 像素单位处理，直接失效。
-
grayscale(0)或grayscale(0%)：完全无灰度，原样显示 -
grayscale(1)或grayscale(100%)：彻底黑白 -
grayscale(0.6)或grayscale(60%)：60% 灰度，保留部分色彩层次
推荐统一用百分比写法，更直观，也和 brightness()、contrast() 等其他 filter 函数保持风格一致。
为什么给图片加了 grayscale，文字也变灰了
因为 filter 是**继承性视觉效果**，不是“仅作用于背景图”的属性。如果你把 filter: grayscale(100%) 加在 <div> 上，里面所有子元素（<img>、<p>、<svg>）都会被一并灰化。
立即学习“前端免费学习笔记（深入）”；
- 只想灰图片？直接给
<img>标签加 class 或内联样式 - 想灰背景图但保留文字彩色？得用
::before伪元素单独承载背景，再对它加filter，主容器不设 - 用
backdrop-filter: grayscale(100%)？注意它只影响“背后区域”，且目前不支持在普通元素上模拟背景图灰度（需配合position: fixed或遮罩层）
hover 切换灰度时动画不生效
常见原因是漏了 transition，或者过渡属性没写对。只写 transition: all 0.3s 不可靠——filter 在某些旧版 Safari 中需要显式声明。
- 必须写成：
transition: filter 0.3s ease - 如果同时用了多个 filter（比如
grayscale(100%) brightness(80%)），切换时要保证两个状态的 filter 值结构一致，否则动画会跳变 - Safari 15.4 之前需要
-webkit-filter前缀，但当前（2026 年）已可省略；若项目仍需兼容 macOS Monterey 旧设备，建议加上
示例：
.photo { filter: grayscale(100%); transition: filter 0.3s ease; }
.photo:hover { filter: grayscale(0%); }
IE 或极老 Android WebView 怎么 fallback
IE 完全不支持 filter，Android 4.4 及更早 WebView 也基本不可用。真要兼容，别折腾前缀，直接换方案：
- 用 SVG 滤镜：定义一个
<filter>并通过filter: url(#grayscale)引用，兼容性略好但写法冗长 - 服务端生成灰度图：同一张图存两版（color.jpg / grayscale.jpg），JS 检测
CSS.supports('filter', 'grayscale(0)')后决定加载哪张 - 放弃灰度：这类环境用户占比已低于 0.2%，多数业务可直接忽略
真正容易被忽略的是性能——filter 会让浏览器启用 GPU 渲染，但若页面有大量带 grayscale() 的图片滚动，低端安卓机可能出现掉帧。建议只对视区内的图片启用，或用 will-change: filter 提前提示（慎用，滥用反而伤性能）。
