filter: grayscale(1) 无效主因是作用对象错误（如 background-image 不支持）、合成层隔离、拼写/单位错误、高优先级样式覆盖；动画需显式 transition 且值格式统一；旧浏览器需降级方案；性能与渲染细节亦影响效果。
直接写 filter: grayscale(1) 就能变黑白，但“没反应”“不动画”“只在部分浏览器生效”才是真问题。
为什么 filter: grayscale(1) 没效果
不是语法错，而是滤镜根本没作用到目标上：
- 图片用了
background-image——filter对背景图完全无效，必须是<img src="">或内联<svg></svg> - 父容器写了
transform: translateZ(0)或will-change: transform，在旧版 Safari 中会隔离合成层，导致滤镜被绕过 - 拼写错误：
greyscale()（英式）不被识别，CSS 标准只认grayscale() - 写了
grayscale(100)漏掉%，浏览器当非法值处理，自动回退为grayscale(0) - 更高优先级样式里有
filter: none或其他filter值，直接覆盖了你的设置
hover 切换时动画不生效或跳变
filter 默认不可过渡，插值依赖严格一致的函数格式：
- 必须显式声明
transition: filter 0.3s ease，且写在默认状态（非:hover）里 - 起始和结束值单位要统一：用
grayscale(0)↔grayscale(1)，或grayscale(0%)↔grayscale(100%)，别混用 - 不能从
grayscale(1)切到none——none是关键字，无法插值，浏览器直接跳变 - iOS Safari 12 及更早版本不支持
filter过渡，需用@supports (filter: grayscale())检测后降级
兼容 IE 和老安卓 WebView 的实际方案
IE11 及更早、Android WebView filter: grayscale()，-ms-filter 也不支持该函数：
- 降级首选：准备一张预生成的黑白 PNG，用
<picture></picture>+srcset或 JS 检测filter支持后切换src - 纯色背景上的图标类图，可用
mix-blend-mode: luminosity配合黑色遮罩层模拟，但适用场景极窄 - 服务端处理更可靠：通过 Cloudflare Images、imgproxy 等加
?grayscale=1参数动态生成灰度图 - 别用
filter: gray（IE 专用），现代浏览器不认，且已废弃
性能与渲染细节容易被忽略的地方
看似简单的滤镜，实际影响渲染路径和视觉一致性：
- 大量图片同时 hover 触发
filter，尤其在滚动区域，可能触发重绘风暴，Chrome 117+ 后更敏感；加will-change: filter提前提示，但别滥用 - Safari（尤其 iOS 12 及更早）对灰度算法采用非线性亮度映射，同一张图比 Chrome/Firefox 更暗、细节更糊，设计稿验收务必真机测试
-
grayscale(1)不等于“高对比黑白”，它只是去色；如需强化反差，得叠加contrast(1.3) brightness(1.1)，且顺序不能错：先grayscale，再调参 - 缩放或 DPR > 1 屏幕下，
grayscale()可能导致边缘发虚——这是浏览器子像素重采样所致，不是代码问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
