直接用 filter: grayscale(1) 可实现全黑白，但 IE 不支持，且影响性能与可访问性；常见失效原因包括滤镜被覆盖、transform 触发硬件加速层干扰、SVG 内联样式无效等，需检查拼写、优先级及 SVG 处理方式。
直接用 filter: grayscale(1) 就能实现全黑白，但要注意它不支持 IE，且对性能和可访问性有隐性影响。
为什么 grayscale() 有时没反应
常见原因是元素被其他 filter 覆盖、父级设置了 transform（触发了硬件加速层，可能干扰滤镜叠加），或图片本身是 SVG 且内联了颜色样式（grayscale() 对 SVG 内部 fill/stroke 无效）。
- 检查是否误写了
grayscale拼写（比如写成greyscale） - 确保没有更高优先级的
filter: none或其他 filter 值覆盖它 - 对 SVG 图片，更可靠的方式是直接在 SVG 标签里用
filter: url(#myGrayscale)
grayscale() 的参数值怎么选
grayscale() 接收 0–1 之间的数值或百分比，0 表示原色，1（或 100%）表示完全黑白。中间值可做渐变过渡，比如 hover 时从 grayscale(0.3) 到 grayscale(1)。
- 避免用
grayscale(100)（会被当成 100%，但语义易混淆，建议统一用小数或带 %） - 动画中频繁切换该值可能触发重绘，如需高性能，考虑用
will-change: filter提前提示浏览器 - 移动端 Safari 对
grayscale()动画支持较弱，建议加-webkit-filter兼容前缀
替代方案：当 filter 不可用时怎么办
IE11 及更早版本完全不支持 filter: grayscale()，也不能用 -ms-filter 模拟（它只支持 blur/alpha 等有限类型）。此时只能降级处理：
- 用 PNG 预生成黑白版本，通过
picture+srcset或 JS 检测 UA 后切换src - 对纯色背景上的图标类图片，用
mix-blend-mode: luminosity配合黑色遮罩层模拟灰度（局限大，仅适用特定场景） - 服务端生成灰度图（如通过 Cloudflare Images 或 imgproxy 加
?grayscale=1参数）
真正麻烦的不是怎么加滤镜，而是忘了它会让图片失去色彩语义——色盲用户可能更难区分状态，而屏幕阅读器不会因此改变 alt 文本。如果黑白只是为“禁用态”视觉提示，不如同时加上 aria-disabled="true" 和明确的文字说明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
