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())检测后降级
图片变灰后发灰、对比度低怎么办
这不是 bug，是算法使然——grayscale() 只做通道均值映射，不增强明暗分离：
- 典型修复组合：
filter: grayscale(100%) contrast(1.2) brightness(1.05) -
contrast()超过 1 提升层次，但 >1.4 容易出现断层 -
brightness()微调（1.05≈ +5%）可恢复因灰度损失的通透感 - 顺序必须是先
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 专用），现代浏览器不认，且已废弃
真正容易被忽略的是渲染细节：Safari（尤其 iOS 12 及更早）对灰度算法采用非线性亮度映射，同一张图比 Chrome/Firefox 更暗、细节更糊；大量图片同时 hover 触发 filter，尤其在滚动区域，可能触发重绘风暴——这些都得真机测试、逐项验证，不能只靠写对一行 CSS 就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
