直接对 html 元素设置 filter: grayscale(100%) 才能全局生效，因 filter 不继承且 fixed/absolute 元素会脱离作用域；需避免 transform/will-change/opacity<1 干扰，iframe/video 等需单独处理；兼容 IE 用 @supports 检测并降级；关键元素用 filter: none !important 重置；切换推荐 classList.toggle() + 单行 transition。
直接给 html 元素加 filter: grayscale(100%) 就能生效，但多数人卡在“写了没反应”或“部分元素漏灰”，核心问题不在会不会写，而在滤镜的继承规则、层叠上下文干扰和浏览器兼容边界。
为什么 body { filter: grayscale(100%) } 常常失效
因为 filter 不继承，且对 position: fixed、position: absolute 元素经常不起作用——它们脱离文档流后可能被渲染到独立图层，绕过 body 的滤镜作用域。
- 必须作用于
html元素，才能覆盖所有后代（包括弹窗、导航栏、加载遮罩等） - 避免在
html或其父级上同时使用transform（如translateZ(0)）、will-change或opacity < 1，这些会触发新绘画上下文，导致滤镜“断连” -
iframe、canvas、video默认不受父级filter影响，需单独加样式或 JS 控制（例如iframe.grayscale { filter: grayscale(100%) }）
兼容旧版 Safari 和 IE 的实际处理方式
现代项目可忽略 IE，但若仍需支持，不能靠加前缀硬扛：-webkit-filter 对 IE 无效，-ms-filter: grayscale 是旧 Edge（≤17）的非标准简写，效果是二值灰度，且不支持百分比参数。
- 优先用特性检测：
@supports (filter: grayscale(0))包裹主样式，IE/旧 Edge 自动跳过 - 对 IE 用户降级为视觉近似：JS 注入
class="ie-grayscale"，配合img { opacity: 0.75; }+ 主题色替换（如:root { --primary: #333; }） - 不推荐 SVG 滤镜模拟：定义复杂、性能差、移动端支持不稳定
如何精准控制“哪些不灰”
哀悼模式下，通告 banner、二维码、紧急联系电话这些关键信息必须保持原色可读，不能靠 z-index 或 visibility 补救——得用 filter: none 主动重置。
立即学习“前端免费学习笔记（深入）”；
- 选择器要足够具体，例如
.notice-banner, .qr-code, .emergency-contact - 必须加
!important：filter: none !important，否则会被html上的高优先级filter覆盖 - 确保这些元素没有被其他带
filter的祖先包裹（比如某个 modal 容器自己也加了灰度），否则会叠加生效
切换与性能要注意的细节
用 classList.toggle() 切换 html.grayscale 是最稳妥的方式，但动画和滚动性能容易被忽略。
- 加过渡时写成单条声明：
html { transition: filter 0.3s ease; }，不要拆成多行filter:规则，否则浏览器可能隐式抗锯齿导致文字发虚 - 高频滚动页面慎用：
filter依赖 GPU，结构复杂的页面可能出现轻微卡顿；可加will-change: filter提示，但仅在激活时设置，用完即删 - 别用内联 style：
document.documentElement.style.filter = 'grayscale(100%)'—— 难维护、易被其他 JS 覆盖、无法用 CSS 动画
真正难的不是加一行 grayscale(100%)，而是确认所有 fixed 元素都灰了、所有 iframe 里加载的内容也灰了、所有表单控件在灰度下仍满足 WCAG AA 对比度——这些必须手动点开 DevTools 逐个检查，没法靠代码自动兜底。
