grayscale(100%)呈现“脏灰”而非“干净黑白”是因为其算法仅做亮度通道转换，压缩中间调并丢弃色相饱和度，导致证件照等低对比图边缘模糊、文字发虚；实际应优先尝试grayscale(0.85)并搭配brightness(1.05)和contrast(1.1)补偿。
filter: grayscale() 是最直接的方案，但直接写 grayscale(100%) 往往会让图发闷、文字图标难辨认，实际项目里不能照搬。
为什么 grayscale(100%) 看起来像“脏灰”而不是“干净黑白”
浏览器把 grayscale(1) 当作纯亮度通道转换，丢弃所有色相和饱和度信息，中间调压缩严重——尤其对证件照、扫描件、低对比原图，边缘模糊、文字发虚。这不是 bug，是算法本身特性。
- 优先试
grayscale(0.85)或grayscale(0.9)，留一点暖调让关键信息可识别 - 搭配
brightness(1.05)和contrast(1.1)补偿损失，例如：filter: grayscale(0.85) brightness(1.05) contrast(1.1); - 避免在
<img>上用内联style="max-width:90%"，改用 class 控制，方便后续加媒体查询或 JS 切换
filter 不生效？先查这五个地方
写了 grayscale(100%) 却没反应，大概率不是语法错，而是作用域或上下文干扰：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 父容器用了
transform、will-change或opacity ，会切断滤镜传递链 - 目标是
background-image而非<img src="...">——filter对背景图完全无效 - 参数漏了单位，比如写成
grayscale(100)（缺 %），浏览器按规范降级为grayscale(0) - 样式被内联
style覆盖，检查是否已有style="filter: ..."并优先级更高 - 图片还没加载完成就尝试应用样式，
img元素可能尚未渲染，建议监听load事件再操作
hover 切换灰度卡顿、闪动怎么办
Chrome/Safari 在高分辨率图上频繁重绘 filter 值，尤其大量图片时容易抖动：
- 必须显式声明默认态：
img { filter: grayscale(0.85); transition: filter 0.2s ease-in-out; } - 不用
will-change: filter，静态 hover 场景反而增加开销；换成transform: scale(1)触发硬件加速更轻量 - 上百张图时，别依赖纯 CSS，改用 JS 批量控制 class，并加入节流逻辑防止未完成动画堆积
- Safari ≤15.6 需加
-webkit-filter前缀，真机测试不可跳过
IE 和旧版 Safari 怎么 fallback
CSS.supports('filter', 'grayscale(0)') 返回 false 时，说明滤镜不可用：
- IE 完全不支持
filter，不能靠它做核心功能；iOS 9.3 以下 Safari 仅支持grayscale(1)且性能极差 - 降级方案优先级：① 提前准备
logo-gray.png作为data-fallback-src，JS 检测失败后替换src；② 固定尺寸图标可用 inline SVG +<fecolormatrix></fecolormatrix>；③ 复杂场景才考虑 Canvas 像素级处理 - 别指望一行 CSS 自动解决所有兼容问题——灰度算法本身在 Chrome 和 Safari 渲染结果就不一致，品牌验收严的话，得切到 SVG 滤镜或 Canvas 手动计算
filter: grayscale()，而是判断这张图灰到什么程度用户还能看清按钮、文字、Logo 边缘，以及当滤镜失效时，fallback 是否真能用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
