直接用 filter: grayscale(1) 加在 body 上会因层叠规则、svg 颜色映射异常、ios 渲染回退等问题导致失效；应改用 :root 自定义属性控制 html 的灰度，并手动排除图表、验证码、字体图标等不适宜灰度的元素。
直接用 filter: grayscale(1) 就能实现全站灰度，但别急着加到 body 上——它会吃掉子元素的 filter，还会让 SVG 图标、Canvas 内容、视频封面等意外失真。
为什么 filter: grayscale(1) 加在 body 上经常失效或出问题
常见错误现象：页面局部没变灰（比如轮播图、弹窗）、文字边缘发虚、SVG 图标变成黑块、transform 动画卡顿、iOS Safari 下完全不生效。
根本原因不是语法错，而是 CSS filter 的层叠规则和渲染管线限制：
-
filter会在当前元素创建新的 stacking context 和 paint layer，子元素若自带filter（如按钮 hover 的blur）会被覆盖或冲突 - SVG 的
fill和stroke颜色在灰度滤镜下可能被强制映射为极暗/极亮值，尤其#fff或currentcolor容易“消失” - iOS 15+ 之前对
grayscale()的硬件加速支持差，加在body这种大容器上容易触发回退到软件渲染，帧率骤降
推荐做法：用 :root + 自定义属性控制灰度开关
把灰度逻辑从 DOM 结构里抽出来，避免污染布局层级，也方便 JS 切换和媒体查询联动：
:root {
--grayscale-enabled: 0;
}
<p>html {
filter: grayscale(calc(var(--grayscale-enabled) * 1));
}</p><p>/<em> 可配合 prefers-reduced-motion 或用户偏好 </em>/
@media (prefers-reduced-motion: reduce) {
:root {
--grayscale-enabled: 1;
}
}</p>
这样做的好处：
- 灰度只作用于
html，不影响内联 SVG 的颜色声明（它们在html子树里，但不受父级 filter 的 color space 转换干扰） - JS 切换只需
document.documentElement.style.setProperty('--grayscale-enabled', '1')，无重排 - 可与
prefers-color-scheme组合：比如深色模式下禁用灰度，避免双重降饱和
必须手动处理的例外元素
有些内容天生不适合灰度——不是技术限制，而是可用性问题。别指望 filter 自动识别：
- 带透明度的
background-image：灰度会把 alpha 通道也“拉平”，导致本该半透的遮罩变实色，建议对这类元素加filter: none !important - 验证码图片、数据图表、地图瓦片：它们依赖色彩区分信息，灰度后不可读，应在 class 层级排除，例如
.chart, .captcha-img { filter: none; } - 字体图标（如 Font Awesome）：部分图标用伪元素 +
content实现，灰度后可能只剩轮廓，建议统一用 SVG Sprite 替代，并给<use></use>显式设fill="currentColor"
真正麻烦的从来不是加一行 filter，而是得想清楚哪些地方“不能灰”、哪些颜色语义会被抹掉、以及旧版 Safari 里 grayscale(1) 和 grayscale(100%) 的解析差异——后者在 iOS 14.5 以下会被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
