全站灰度不能只写 body { filter: grayscale(1); }，因 filter 不继承且对 fixed/absolute 元素失效；应作用于 html 元素，并避免 transform 等触发新图层，canvas/webgl 需单独处理。
全站灰度为什么不能只写 body { filter: grayscale(1); }
因为 filter 不会继承，且对 position: fixed 或 position: absolute 的元素（比如导航栏、弹窗、加载遮罩）常常失效——它们脱离了普通文档流，可能渲染在根层叠上下文之外，导致灰度被跳过。更隐蔽的问题是：某些浏览器（如旧版 Safari）对根元素应用 filter 时，会意外截断子元素的 box-shadow 或模糊效果。
实操建议：
- 必须将灰度作用于
html元素，而非body，才能覆盖所有后代（包括 fixed 定位元素） - 避免同时使用
transform或will-change，否则可能触发独立图层，绕过灰度滤镜 - 若页面有 WebGL / Canvas 内容，灰度对其无效——需单独处理 canvas 的
ctx.filter = 'grayscale(1)'（仅部分浏览器支持）
如何动态开关灰度而不触发重排或闪烁
直接切换 class 可能因 CSSOM 重计算导致短暂白屏（尤其在大型 SPA 中）。关键不是“加不加样式”，而是“怎么加”。
实操建议：
- 预设两个 class：
grayscale-on（html.grayscale-on { filter: grayscale(1); }）和grayscale-off（空类，仅作标记） - 用
document.documentElement.classList.toggle('grayscale-on')切换，避免操作style属性引发强制同步布局 - 添加
transition: filter 0.3s ease到html规则中，让开启/关闭有缓动，减少视觉突兀感 - 如果灰度需持久化（如用户选择），存到
localStorage并在内联脚本中尽早读取并加 class，防止闪回
IE 和低版本 Edge 不支持 filter 怎么办
filter: grayscale(1) 在 IE 完全不生效，Edge 12–17 需要 -webkit-filter 前缀但实际兼容性极差。强行 polyfill 代价高（例如用 SVG 滤镜模拟），且影响首屏性能。
实操建议：
- 明确放弃 IE 支持——当前主流哀悼场景（政府、媒体站点）已普遍声明不兼容 IE
- 如必须兼容，改用 class 控制全局
opacity+ 覆盖一层半透灰黑::before伪元素（非真灰度，但视觉上接近，且 100% 兼容） - 检测时别用
CSS.supports('filter', 'grayscale(1)')，它在旧 Edge 中返回 true 却不执行——应结合document.documentMode或 UA 判断
灰度模式下图片和 SVG 颜色异常怎么办
部分 PNG 透明通道、SVG 内联 fill 或 CSS background-color 在灰度后仍显色，是因为 grayscale() 只转换像素亮度，不改变 alpha 或色相逻辑；SVG 若用 currentColor 且父级未灰度，也会漏掉。
实操建议：
- 对 SVG 图标统一加
html.grayscale-on svg { filter: grayscale(1); }强制二次灰度 - 避免在灰度模式下依赖渐变色（
linear-gradient）——灰度后可能变成不可控的灰阶带，改用单色background-color - 若用
background-image: url(...)，确保图片本身是灰度 PNG/JPEG；否则滤镜对 base64 编码图无效（某些 CDN 会解码重压）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
