应将 filter: grayscale(100%) 应用于 html 元素而非 body，同时补全 -webkit-filter 和 ie 11 的 progid 语法，并用 @supports 包裹以保兼容；关键内容需用 filter: none !important 显式排除；推荐通过 class 切换灰度并添加 transition 实现平滑过渡。
直接给 html 元素加 filter: grayscale(100%) 就能全局置灰，但只写这一行大概率出问题——不是没效果，就是文字看不清、按钮点不动、旧浏览器全白屏。
为什么 body 上加 filter 常常无效
很多人第一反应是写 body { filter: grayscale(100%) }，结果页面颜色纹丝不动。根本原因不是语法错，而是渲染机制卡住了：
-
body高度可能不足（比如内容空或height: 100%失效），导致滤镜作用区域为 0 -
body上若存在transform、will-change或position: fixed容器，会创建独立层叠上下文，filter无法穿透到子元素 -
iframe、video、canvas默认不继承父级filter，得单独处理
正确做法是换到 html：它覆盖整个视口、包含滚动条、伪元素和根背景，且不会被常见布局属性干扰。
兼容性不能靠猜，得按浏览器实测补全
现代 Chrome/Firefox/Edge 没问题，但 Safari 8–15.6 和部分安卓 WebView 只认 -webkit-filter；IE 11 则必须用 progid 语法，其他写法一律忽略。
- 必须同时写：
filter: grayscale(100%)和-webkit-filter: grayscale(100%) - IE 11 降级方案：
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) - 别写
-moz-filter或-o-filter——Firefox 早就弃用前缀，Opera 已转 Chromium 内核 - 用
@supports (filter: grayscale(0))包裹样式，避免低版本解析失败导致整段 CSS 失效
关键信息不能“一起灰”，得用 filter: none !important 主动排除
哀悼模式下，通告 banner、二维码、紧急电话这些内容必须保持原色可读。靠 z-index 或 visibility 挡不住灰度，唯一可靠方式是显式重置滤镜：
- 选择器要够具体，例如：
.notice-banner, .qr-code, .emergency-contact - 必须加
!important，否则会被html上的高优先级filter覆盖 - 确保这些元素没有被其他带
filter的祖先包裹（比如某个弹窗容器自己也加了灰度），否则会叠加生效 - 不要只写
filter: none，要写filter: none !important; -webkit-filter: none !important;
切换开关别硬写 style.filter，用 class 更稳
JS 直接改 element.style.filter 看似快，但难维护、易冲突、没法加动画、localStorage 同步也麻烦。
- 定义 CSS：
html.grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); } - JS 切换：
document.documentElement.classList.toggle('grayscale') - 如需淡入，只在
html上加：transition: filter 0.3s ease;（注意：部分 iOS 版本对filter动画有抖动，可微调为cubic-bezier(0.25, 0.46, 0.45, 0.94)） - 别在 React/Vue 等框架里把
filter写进内联style对象——静态 class 才能被浏览器高效复用
真正容易被忽略的是对比度：纯 grayscale(100%) 会让浅灰文字贴在浅灰背景上，表单控件可能直接达不到 WCAG AA 标准。得组合 brightness() 和 contrast() 微调，而且顺序不能错——grayscale(100%) brightness(1.05) contrast(1.1) 才有效，反过来就白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
