推荐写法是filter: grayscale(100%)并添加多前缀兜底，因旧版safari（ios 12–13）及部分安卓webview不支持标准语法，需按-webkit-filter、-moz-filter等顺序书写，标准属性放最后以确保新浏览器优先使用。
直接给 img 元素加 filter: grayscale(100%) 就行
这不是“理论上可行”，而是浏览器原生支持、零 JS、一行 CSS 就生效的方案。现代 Chrome、Firefox、Safari（iOS 14+）、Edge 都能直接识别 filter: grayscale(100%)，不需要任何 polyfill。
但注意：只写这一行，在旧版 Safari（iOS 12–13）、部分安卓 WebView（如旧款华为/小米系统浏览器）里会完全失效——不是变淡，是压根不渲染灰度。
-
grayscale(100%)是唯一推荐写法；grayscale(1)或grayscale(true)在某些 WebView 中会被忽略 - 别漏掉括号和百分号：
grayscale(100)或grayscale单独写都不合法 - 如果图片是
<picture></picture>或<svg></svg>内嵌的<image></image>，需单独加样式，父容器的filter不会穿透继承
需要兼容老安卓和 iOS 12 时，必须加多前缀 + 降级 fallback
京东、淘宝等一线网站实际用的不是单行代码，而是带前缀的组合写法，目的就是兜底。仅靠 filter: grayscale(100%) 在低版本环境大概率白屏（彩色照常，灰度消失）。
安全写法示例：
img.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
/* IE 低版本兜底（已基本可弃，但政企内网仍可能遇到）*/
filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
重点不是堆前缀，而是顺序：把标准属性 filter 放在最后，确保新浏览器优先用它，旧浏览器按顺序 fallback 到对应前缀版本。
- Android 7–8 系统不支持小数参数，所以
grayscale(0.8)会退成 0%，必须用整数百分比 - 若项目明确不支持 IE 和 Android -webkit-filter +
filter两行 - 别重复写
-webkit-filter: gray—— 这是过时语法，Chrome 早已废弃，且和grayscale()行为不一致
图片加灰后点击失效？加 will-change: filter
真机测试时常见问题：灰度图片点击没反馈、:active 样式不触发、甚至整个区域点不动。这不是 CSS 写错了，而是 WebView 对带 filter 的元素做了图层合成优化，导致事件捕获路径异常。
解决方法很简单，在灰度类里加一行：
img.gray {
filter: grayscale(100%);
will-change: filter;
}
这句强制浏览器为该元素创建独立合成层，修复事件响应链。比 transform: translateZ(0) 更精准、副作用更小。
- 只对可交互的图片加
will-change，全站图片都加会增加内存开销 - 如果图片是
<a></a>包裹的，确保没设pointer-events: none，否则will-change也救不了 - 动画切换灰度时（比如 hover 变灰），transition 必须声明在默认状态，不能只写在
:hover里，否则 iOS Safari 13.3 以下会跳帧
批量控制页面所有图片，但要小心文字和 SVG 不受影响
想一键灰化整页图片，最省事是给 body 或 html 加 filter，但它只影响位图（<img>、CSS 背景图、<svg></svg> 中的 <image></image>），对文字、边框、纯色 <rect></rect>、CSS 渐变等完全无效——很多人误以为“没生效”，其实是预期偏差。
若页面混有必须保持彩色的关键图（如 logo、二维码），可用例外重置：
body.gray-all img { filter: grayscale(100%); }
body.gray-all img.colorful { filter: grayscale(0%); }
注意：SVG 内联图标（<svg><path></path></svg>）不会被 filter 影响，要灰化得单独改 fill 或用 <filter></filter> 标签定义 SVG 滤镜，这是另一套机制。
- 背景图（
background-image）受父容器filter影响，但background-color不受影响 - 使用
filter批量处理时，性能开销极低；但若同时叠加blur()或多个滤镜，低端安卓机可能出现卡顿 - 服务端渲染（SSR）页面要注意：灰度 class 若由 JS 动态注入，首屏可能闪动，建议服务端直出 class 或用
prefers-reduced-motion做渐进增强
真正麻烦的从来不是“怎么写”，而是“什么时候不该写”：政企系统要兼容 IE，老旧安卓 WebView 会吃掉小数参数，iOS Safari 对 transition 的支持断层明显，还有那些藏在 SVG 里的非位图元素——它们根本不吃 filter 这一套。动手前先确认目标环境，比堆兼容写法更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
