不能直接给body加filter: grayscale(1)，因会强制创建新层叠上下文覆盖子元素filter、导致svg图标变黑、ios旧版退化软件渲染卡顿，且轮播图等脱离文档流元素不生效；应改用:root变量控制html灰度并手动排除关键元素。
直接用 filter: grayscale(1) 加在 body 上，页面大概率局部失效、SVG 图标变黑、iOS 卡顿——这不是写法错，是渲染机制被触发了。
为什么不能直接给 body 加 filter: grayscale(1)
它会强制创建新的 stacking context，导致子元素自带的 filter（比如按钮 hover 的 blur()）被覆盖；SVG 的 fill 和 stroke 在灰度空间里容易映射成纯黑或纯白，图标“消失”；iOS Safari 15 前还会退化为软件渲染，滚动卡顿明显；轮播图、弹窗、Canvas 动画这些脱离文档流的元素，根本不受影响。
:root + html 是最稳的灰度开关位置
把灰度控制权从 DOM 结构里抽出来，只作用于 html 根元素，既避开层叠污染，又方便 JS 动态切换：
:root { --grayscale-enabled: 0; }-
html { filter: grayscale(calc(var(--grayscale-enabled) * 1)); }——calc()确保值始终是数字类型，避免 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，是可用性硬伤：
- 官方通告 banner、二维码、无障碍图标、紧急联系方式等关键信息，需显式重置：
.notice-banner, .qr-code { filter: none !important; -webkit-filter: none !important; } -
!important是必要的，因为html上的filter优先级太高 - 确保这些元素没被其他父级
filter再次包裹，否则灰度会叠加 - Canvas、video 封面、WebGL 内容不受 CSS
filter影响，需单独处理（如 Canvas 用ctx.filter = 'grayscale(100%)'，但仅 Chrome 支持）
真正麻烦的不是怎么开灰度，而是怎么让 SVG 不变黑、让 iOS 不卡、让轮播图也灰——这些细节不手动兜底，上线后用户一眼就能看出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
