现代浏览器只需 filter: grayscale(100%) 即可全局变灰，应作用于 html 元素以确保所有后代生效；IE 8 及更早需用 progid，但已基本无需兼容。
直接用 filter: grayscale(100%) 最省事
现代浏览器（Chrome、Firefox、Edge、Safari 9+）都支持标准的 filter: grayscale(100%)，一行 CSS 就能让图片变灰，不用改图、不增请求、不依赖 JS。只要给 <img alt="HTML怎么设置图片灰度效果_网页图片变黑白代码【技巧】" > 加个 class 或直接写在标签上就行：
img.gray { filter: grayscale(100%); }
注意：别只写 filter: gray —— 这是 IE 专属老语法，Chrome/Safari/Firefox 全部不认，写了等于白写。
-webkit-filter 前缀现在基本可以删了
2026 年绝大多数用户用的 Chrome 120+、Edge 120+、Firefox 125+，filter 已是无前缀稳定特性。但如果你的站点明确要兼容 Safari 6–8 或旧版 Android WebView（比如还在维护政务类老系统），才需要保留：
-
-webkit-filter: grayscale(100%)（仅 Safari ≤8、Android ≤4.4） -
-moz-filter和-o-filter实际已无必要，连 Firefox 50+ 都早就不需要了 -
-ms-filter对应 IE 10–11，但 IE 已停更，且它们其实支持无前缀filter
结论：日常项目中，只写 filter: grayscale(100%) 即可，加一堆前缀反而可能干扰调试。
立即学习“前端免费学习笔记（深入）”；
整站变灰别只套 body，必须用 html
很多人写 body { filter: grayscale(100%) }，结果发现下拉菜单、弹窗、<video></video>、<iframe></iframe> 还是彩色的——因为这些元素可能脱离 body 文档流或被提升到更高层叠上下文。真正生效的写法是：
html { filter: grayscale(100%); }
原因：html 是根元素，CSS 滤镜会向下传递并影响所有后代（包括 、<dialog></dialog>、<video></video>、<canvas></canvas> 等）。但要注意两点：
- Flash 内容（极少见）不受影响，需额外加
wmode="opaque" - 某些第三方组件（如地图 SDK 的覆盖物）可能绕过滤镜，得单独加 class 处理
IE 8 及更老版本只能靠 progid，但慎用
如果真要兼容 IE 8（比如内网老旧系统），唯一可行的是微软专有语法：
html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
但它有硬伤：
- 只对 IE ≤8 有效，IE 9+ 已废弃该语法，也不支持
filter: gray - 会导致页面重绘卡顿，尤其含大量图片时，CPU 占用飙升
- 和现代
filter冲突，若同时写，部分浏览器可能忽略后者
所以除非明确要求支持 IE 8，否则不要混用 progid 和 grayscale()。现在主流统计里 IE 8 占比低于 0.02%，强加兼容反而增加维护成本。
真正容易被忽略的点是：滤镜对性能有真实影响，尤其是移动端或低端 PC；如果只是临时哀悼日使用，建议用 JS 动态插入/移除 class，而不是长期挂载在 html 上。
