必须作用于html元素才能全局生效，因filter不继承且fixed/absolute元素会脱离body作用域；需避免transform/will-change干扰，iframe/video等需单独处理，关键元素用filter:none!important重置，切换推荐classList.toggle()加transition。
直接作用于 html 元素，而不是 body，是唯一能稳定覆盖所有内容（包括 position: fixed 导航栏、弹窗、滚动条）的方案。
为什么必须用 html 而不是 body？
filter 不继承，且对脱离文档流的元素（如 position: fixed、position: absolute）常失效——它们可能被渲染在独立层叠上下文里，绕过 body 的滤镜。而 html 是根元素，作用于它才能穿透到所有后代节点。
-
html上设filter: grayscale(100%)可覆盖iframe、video外的全部内容（这些需单独处理） - 若同时用了
transform或will-change，会触发新图层，导致灰度“消失”，务必检查并移除 - 确保
html有足够高度：加min-height: 100vh，避免因内容空或塌陷导致视觉上“没生效”
怎么让关键内容（如通告 banner、二维码）保持彩色？
靠 z-index 或 visibility 挡不住灰度，唯一可靠方式是显式重置滤镜，并用 !important 确保优先级。
- 写法必须具体：例如
.notice-banner, .qr-code, .emergency-contact { filter: none !important; -webkit-filter: none !important; } -
!important不可省略——因为html上的filter权重极高，普通选择器压不住 - 检查这些元素是否被某层父容器（比如弹窗 wrapper）也加了
filter，否则会叠加生效，彩色变回灰色
如何安全切换、避免闪屏或重排？
别直接操作 style.filter，也别用 display: none 控制开关；用 class 切换最轻量、可动画、易持久化。
立即学习“前端免费学习笔记（深入）”；
- 预定义样式：
html.grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); } - JS 切换：
document.documentElement.classList.toggle('grayscale') - 加过渡：
html { transition: filter 0.3s ease; }，但注意旧版 Safari 可能抖动 - 要记住用户偏好？在
<head>内联脚本中读取localStorage并立即加 class，防止首屏闪回原色
IE 和旧 Edge 怎么办？
filter: grayscale() 在 IE 完全不支持，Edge ≤17 兼容性极差，强行 polyfill 成本高、性能差，不推荐。
- 现代方案优先：
@supports (filter: grayscale(0))做特性检测，只对支持浏览器启用 - 降级策略更实际：IE 用户看到原色，明确放弃支持——哀悼模式是短期仪式性需求，非功能核心
- 若必须兼容，改用
html.grayscale::before伪元素 + 半透灰黑遮罩（非真灰度，但 100% 兼容） - 别信
CSS.supports('filter', 'grayscale(1)')，它在旧 Edge 中返回true却不执行
真正容易被忽略的点不在代码本身，而在测试环节：表单控件（checkbox、radio、button）在灰度下是否仍可辨识，以及 canvas、WebGL 内容是否需要 JS 层额外注入灰度逻辑——这些往往上线后才暴露。
