应将灰度滤镜作用于html根元素而非body，以确保覆盖fixed、absolute等脱离文档流的元素，并通过class控制切换、!important重置关键彩色内容、特性检测兼容旧浏览器。
必须作用于 html 元素，而不是 body
直接给 body 加 filter: grayscale(100%) 看似简单，但实际会漏掉 position: fixed 导航栏、弹窗、滚动条甚至部分 iframe 内容。根本原因是 filter 不继承，且脱离文档流的元素（如 fixed、absolute）常被渲染在独立图层中，绕过 body 的滤镜作用域。
只有作用于 html 这个根元素，才能穿透所有后代节点——包括那些“飘”在最上层的元素。实操时务必加：
-
html { min-height: 100vh; }，防止内容空或塌陷导致视觉上“没变灰” -
-webkit-filter: grayscale(100%);必须写，iOS Safari 和旧版 Chrome 仍依赖它 - 别写
grayscale(1)或grayscale(true)，移动端部分 WebView 会直接忽略
关键彩色内容怎么保留？靠 filter: none !important
想让通告 banner、二维码、紧急联系按钮保持原色？别指望 z-index 或 visibility，它们挡不住根元素的滤镜。唯一可靠方式是显式重置子元素的滤镜，并用 !important 强制覆盖。
例如：
html.grayscale .notice-banner,<br>html.grayscale .qr-code {<br> filter: none !important;<br> -webkit-filter: none !important;<br>}
注意点：
-
!important不可省略——html上的filter权重极高，普通选择器压不住 - 检查这些元素是否嵌套在某个也加了
filter的父容器里（比如弹窗 wrapper），否则会叠加生效，彩色又变灰 - 若用 SVG 图标，确保其
<image></image>子元素没被父级滤镜二次影响
切换要平滑，别用 style.filter 直接赋值
频繁修改 element.style.filter 会触发强制重排，尤其在低端安卓机上容易卡顿或闪屏。推荐用 class 控制，轻量、可动画、易持久化。
预定义样式：
html { transition: filter 0.3s ease; }<br>html.grayscale {<br> filter: grayscale(100%);<br> -webkit-filter: grayscale(100%);<br>}
JS 切换：
document.documentElement.classList.toggle('grayscale');
额外提醒：
- 过渡声明必须写在默认状态（即
html规则里），不能只写在.grayscale中，否则首次切换无动画 - 旧版 Safari（≤13.3）对
filter过渡支持不稳定，可能出现跳变；如需兼容，可 fallback 到opacity: 0.95+contrast(0.85)组合 - 首屏加载时记得从
localStorage读取用户偏好并立即加 class，避免闪回原色
IE 和旧 Edge 怎么办？别硬撑，该放弃就放弃
filter: grayscale() 在 IE 完全不支持，Edge ≤17 兼容性极差。强行用 SVG 滤镜或 JS polyfill 成本高、性能差，还会拖慢主线程。
更实际的做法：
- 用
@supports (filter: grayscale(0))做特性检测，只对支持浏览器启用灰度逻辑 - IE 用户看到原色，明确放弃支持——哀悼模式是短期仪式性需求，不是功能核心
- 若业务强要求降级，可用
html.grayscale::before伪元素 + 半透灰黑遮罩（rgba(0,0,0,0.3)），虽非真灰度，但 100% 覆盖、零兼容风险
真正容易被忽略的是：transform 和 will-change 会创建新合成层，导致灰度“消失”。上线前务必全局搜索 transform 和 will-change，临时移除或改用其他方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
