filter: grayscale(1) 更可靠，因它作用于渲染后像素层，覆盖图片、渐变、SVG等所有内容；而hsl(...,0%,...)仅影响显式声明的CSS颜色值，无法全局降饱和度。
直接用 filter: grayscale(1) 更可靠，hsl(..., 0%, ...) 无法全局控制页面色彩——它只影响你显式声明的 CSS 颜色值，对图片、渐变、SVG 填充、border-image 等完全无效。
为什么不能靠 hsl() 统一降饱和度
很多人看到 hsl(120, 0%, 50%) 这类写法，误以为把所有颜色里的 s（饱和度）设为 0% 就能“一键灰化”。但现实是：
- CSS 中大量颜色来自外部：图片的
src、background-image、border-image、SVG 的fill/stroke属性等，它们不解析为 HSL，也不受你定义的变量或重置规则影响 - 即使你用
:root定义了--text: hsl(0, 0%, 30%)，也只作用于明确写了color: var(--text)的地方；按钮默认边框色、input 的 placeholder 灰度、浏览器默认 focus outline 等仍保持原色 - 伪元素生成的内容（如
::before的content: "★"）若没显式设color，会继承父级，但父级若本身是图片或渐变背景，就根本没 color 可继承
filter: grayscale() 是唯一真正覆盖全页面的方案
它作用于渲染后的像素层，不管来源是 HTML 元素、内联图、CSS 背景图、Canvas 还是 SVG，只要在该 DOM 节点及其子树内，都会被统一处理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对整站生效，直接加在
html或body上：html { filter: grayscale(1); } - 避免写成
filter: grayscale(100%)—— 虽然等价，但小数写法（1）更利于后续 JS 动态插值，比如element.style.filter = `grayscale(${progress})` - 别漏掉旧版 Safari（iOS 9.3 以下）和微信 X5 内核（部分 Android 6–8 设备），它们会直接忽略
filter；可用@supports (filter: grayscale())包裹，或 fallback 到预处理的黑白 PNG 背景图 - 慎用
filter在滚动容器内（如overflow-y: scroll的 div）——Chrome 117+ 后可能触发额外合成层，导致卡顿；优先挂载到html根节点
叠加 contrast() 和 brightness() 才算“有质感的黑白灰”
grayscale(1) 只是去色，不是提对比。一张低反差的彩色图变灰后，依然发灰、糊、看不清文字边界。
真正实用的组合写法：
html {
filter: grayscale(1) contrast(1.15) brightness(1.05);
}
说明：
- 顺序不能错：必须先
grayscale，再调contrast和brightness；否则高光/阴影区域的残留色相会被拉伸失真 -
contrast(1.15)比1.2更安全——超过1.3易让浅灰文字与背景粘连，尤其在 OLED 屏上 -
brightness(1.05)是微调，补偿 contrast 带来的整体压暗；别用1.2以上，否则中灰区域会泛白失细节 - 这些值需结合你的原始设计稿测试，没有通用“最佳值”；深底色网站可能反而要
brightness(0.95)
最常被忽略的一点：滤镜生效后，img 元素若同时用了 object-fit: cover + filter，浏览器会把裁切区外的像素也纳入滤镜计算范围，导致边缘模糊。解决办法只有两个：要么移除 object-fit 改用 padding 模拟，要么给 img 包一层 div 并在该 div 上加 overflow: hidden。
