全站灰度化需作用于html元素而非body，因filter不继承且对fixed/absolute、transform、iframe、canvas等脱离文档流或独立绘制的内容失效；须分层兜底：主容器设grayscale(1)，特殊元素白名单补灰，并防第三方样式覆盖。
全站灰度化不是简单加一句 filter: grayscale(1) 就能生效的，它受层叠顺序、DOM 结构、硬件加速、SVG/Canvas 内容以及部分浏览器兼容性影响，直接全局应用常导致按钮失效、图片不灰、文字发虚甚至页面卡顿。
为什么 html { filter: grayscale(1) } 有时不生效
最常见原因是子元素设置了 filter: none、transform 或 will-change，会创建独立的绘制上下文（painting context），隔离父级 filter。另外，iframe、video、canvas 和内联 SVG 中的 <image></image> 默认不受外层 CSS filter 控制。
- 检查是否在某个组件或重置样式中写了
* { filter: none !important }—— 这会直接覆盖 html 级灰度 -
position: fixed或transform: translateZ(0)的元素容易脱离滤镜作用域，需单独加filter: grayscale(1) - Chrome 115+ 对
filter在body上的继承做了更严格的限制，推荐始终作用于html而非body
如何确保所有可见内容都被灰度覆盖
纯 CSS 方案必须分层兜底：主容器 + 特殊元素白名单处理。不能只靠一层规则。
- 基础层：
html { filter: grayscale(1); }（必须写在最外层，且无!important干扰） - 兜底层：对已知逃逸区域显式补灰，例如
iframe, video, canvas, [role="img"], svg image { filter: grayscale(1); } - 防覆盖层：重置第三方 UI 库可能注入的
filter: none，可用html :where(*) { filter: inherit !important; }（注意:where()兼容性，IE 不支持） - 慎用
filter: grayscale(100%)—— Safari 旧版对百分比解析不稳定，统一用grayscale(1)
灰度化对性能和可访问性的影响
开启全站 filter 会强制触发 GPU 合成，低端设备可能出现 10–20ms 渲染延迟；同时，灰度会削弱颜色对比度，导致 WCAG AA/AAA 认证失败，尤其影响色觉障碍用户识别状态色（如红/绿按钮）。
- 生产环境建议配合开关控制，例如通过 class 切换：
html.gray-mode { filter: grayscale(1); }，避免无条件启用 - 若用于哀悼场景，应同步调整
prefers-reduced-motion: reduce响应逻辑，避免灰度 + 动画双重干扰 - 某些广告 SDK 或监控脚本会动态插入
div并设置z-index: 9999，这类浮层常漏灰——需监听 DOM 变化并 patch 新节点
真正稳定的全站灰度不是“加一行 CSS”，而是理解 filter 的渲染链路、主动拦截逃逸节点、并为不可控内容留出 JS 补救通道。很多团队后期都不得不加 MutationObserver 监听新挂载的 iframe 或 canvas 并手动设 style，这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
