filter: grayscale(1) 是最快实现彩色转黑白的CSS方案，浏览器原生支持，原理为RGB加权灰度化，非阈值切割，全平台兼容且支持过渡动画。
用 filter: grayscale(1) 最快实现彩色转黑白
直接加这一行 CSS 就能强制把图片变灰度，浏览器原生支持，无需 JS 或预处理。原理是应用 SVG 滤镜，把 RGB 通道按亮度加权合并，等效于去色（desaturate），不是简单粗暴的黑白阈值切割。
常见错误是写成 grayscale(100%) 或 grayscale(100)——虽然部分浏览器兼容，但规范只认无单位数值或百分比，grayscale(1) 是最稳妥写法，Chrome/Firefox/Safari/Edge 全支持。
-
grayscale(0)表示完全不处理，保留原色 -
grayscale(0.5)是半灰度，适合过渡动画 - 别和
contrast()或brightness()混用，叠加后容易发灰发暗，失真明显
为什么 filter: grayscale(1) 比 background-image 替换更实用
用伪元素或背景图手动换黑白图，要额外切图、维护两套资源、响应式时更麻烦；而 filter 是实时渲染，缩放、懒加载、srcset 都不受影响。特别适合头像、商品图、图标列表这类需要 hover 彩色/常态黑白的场景。
注意：滤镜会触发硬件加速，大量图片同时加 filter 可能轻微增加 GPU 负担，但单张或几十张完全无感。移动端 iOS Safari 13+、Android Chrome 80+ 均已稳定支持。
立即学习“前端免费学习笔记（深入）”；
- 支持 transition 动画：
transition: filter 0.3s可平滑切换灰度 - 不能用在
<img>的src属性上——它是作用于渲染层，不是修改图像数据 - 如果图片本身带 alpha 通道（如 PNG 透明背景），灰度后透明度保持不变
遇到图片没变灰？优先检查这三处
不是所有“看起来彩色”的图都能被 grayscale() 正确处理，尤其当页面已有其他样式干扰时。
- 父容器设置了
overflow: hidden且图片溢出，可能裁掉滤镜渲染区域（滤镜有隐式扩张） - 图片被
transform: scale()或will-change: transform触发了独立合成层，某些旧版 Safari 下滤镜失效 - 图片是 SVG 内联写法（
<svg><image href="...">），需对<image>元素单独加 filter，不能只加在 SVG 容器上
调试技巧：临时加 outline: 1px solid red 看是否渲染异常；用浏览器开发者工具的 “Computed” 面板确认 filter 是否生效且未被覆盖。
想彻底单色（比如纯黑底白图）？filter 不够用
grayscale(1) 输出的是灰度图，每个像素仍是 0–255 的灰阶值，并非二值化（black/white only）。如果业务要求 OCR 友好、打印优化或高对比标识，必须用图像处理工具预生成黑白位图，或服务端动态生成。CSS 没有 threshold(128) 这类函数，强行用 contrast(100) brightness(0.5) 模拟效果差，边缘锯齿严重，且无法控制阈值点。
真正需要“非黑即白”的地方，别硬扛 CSS——它不是图像编辑器。
