直接给body加filter: grayscale(1)会出问题，因创建新层叠上下文覆盖子元素filter、导致SVG颜色失真、iOS旧版退化软件渲染卡顿，且轮播图等脱离文档流元素不生效；应改用:root自定义属性控制html灰度。
为什么直接给 body 加 filter: grayscale(1) 会出问题
不是语法错，是渲染机制卡住了：它强制创建新的 stacking context，导致子元素自带的 filter（比如按钮 hover 的 blur）被覆盖；SVG 的 fill 和 stroke 在灰度空间里容易映射成纯黑或纯白，图标“消失”；iOS Safari 15 前还会退化为软件渲染，页面卡顿。更麻烦的是，有些轮播图、弹窗、Canvas 动画压根不变灰——因为它们脱离了普通文档流，filter 层叠没生效。
用 :root 自定义属性控制 html 的 filter
把灰度开关从 DOM 结构里抽出来，只作用于 html 根元素，既避开层叠污染，又方便 JS 动态切换：
code:root {
--grayscale-enabled: 0;
}
html {
filter: grayscale(calc(var(--grayscale-enabled) * 1));
}-
calc(var(--grayscale-enabled) * 1)是为了确保值始终是数字类型，避免 CSS 解析失败 - JS 切换只需一行：
document.documentElement.style.setProperty('--grayscale-enabled', '1')，无重排重绘 - 可配合媒体查询自动启用：
@media (prefers-reduced-motion: reduce) { :root { --grayscale-enabled: 1; } } - 深色模式下想禁用灰度？加一句：
@media (prefers-color-scheme: dark) { :root { --grayscale-enabled: 0; } }
哪些元素必须手动排除灰度
灰度不是万能遮罩，有些内容一灰就废——这不是 bug，是可用性硬伤：
-
background-image带 alpha 通道的遮罩层：灰度会吃掉透明度，变成实色块，建议对这类元素加filter: none !important - 验证码、ECharts 图表、Leaflet 地图瓦片：色彩即信息，灰度后无法识别，统一加 class 如
.captcha-img, .chart, .map-tile { filter: none; } - 字体图标（如 iconfont）：如果靠
color控制显示，灰度后可能变浅不可见，需显式设color: #000或color: #fff - 内联 SVG：虽然
html上的 filter 不会破坏其fill声明，但若 SVG 本身用了filter（比如阴影），仍需单独重置
filter 在不同浏览器里的兼容写法要不要加
2026 年现在不用了。-webkit-filter、-moz-filter、IE 的 progid 全部过时。主流浏览器（Chrome 120+、Safari 17+、Firefox 115+）已原生支持 filter: grayscale()，连 calc() 也能正确解析。唯一要留心的是：如果你的项目还跑在 iOS 14 或更老系统上，得 fallback 到 JS 注入 class + CSS 规则的方式，但这种场景已极少见。
立即学习“前端免费学习笔记（深入）”；
