body加filter: grayscale(100%)未生效主因是高度不足、层叠上下文干扰或iframe/video等元素不继承；需设min-height: 100vh、避免transform触发新绘画上下文，并单独处理非继承元素。
body加filter: grayscale(100%)为什么没生效
常见现象是写了但页面颜色没变，大概率是层级或继承问题。CSS filter 作用于渲染后的整个元素盒（包括子元素），但若 body 高度不足（比如内容没撑开）、或被 position: fixed / transform 等触发了新的层叠上下文，就可能让滤镜“看起来失效”。
- 确保
body高度至少覆盖视口：height: 100vh或min-height: 100vh - 避免在
body上同时用transform（如transform: translateZ(0)），它会创建独立的绘画上下文，导致滤镜不穿透到子元素 - 如果页面有
iframe、canvas、video，它们默认不受父级filter影响，需单独加样式或 JS 控制
灰度模式要兼容IE和旧版Edge怎么办
filter: grayscale() 在 IE 完全不支持，旧版 Edge（≤17）只支持 filter: gray 这个非标准简写，且效果是二值灰度（非平滑过渡）。不能指望单条 CSS 覆盖所有环境。
- 优先用现代方案：
filter: grayscale(100%)+@supports (filter: grayscale(0))做特性检测 - IE/旧 Edge 只能降级：用
-webkit-filter: grayscale(100%)无用，它们不认；可考虑 JS 注入 class 后用 SVG 滤镜模拟，但成本高、性能差 - 更实际的做法是明确告知：IE 用户看到的是原色，不强求一致——哀悼模式本质是短期仪式性需求，兼容性可适度妥协
如何快速开关灰度模式而不重排页面
直接切 body 的 filter 是最轻量的方式，但要注意别用 display: none 或修改 class 触发重排。JS 控制时，操作 style.filter 是合成层属性，浏览器通常只触发布局后重绘，不影响性能。
- 推荐用 class 切换：
document.body.classList.toggle('grayscale-mode')，配合 CSS：.grayscale-mode { filter: grayscale(100%); } - 避免内联 style 写法：
body.style.filter = 'grayscale(100%)'—— 不易维护，且 JS 多次调用易出错 - 如果页面用了 CSS-in-JS 或框架（如 React），注意不要把
filter写进动态 style 对象里反复计算，静态 class 更稳
灰度后文字可读性下降，怎么微调对比度
纯 grayscale(100%) 会让浅灰文字贴在浅灰背景上，尤其对 WCAG AA/AAA 对比度有要求的场景。滤镜本身不调整亮度或对比度，得叠加其他 filter 函数。
立即学习“前端免费学习笔记（深入）”；
- 组合使用：
filter: grayscale(100%) brightness(1.05) contrast(1.1)，数值微调即可，避免过曝或死黑 - 注意顺序：CSS filter 函数按书写顺序执行，
brightness在grayscale后应用才影响灰度结果 - 移动端 Safari 对多 filter 组合偶有渲染异常（尤其 iOS 15 以下），建议加
will-change: filter或限制只在桌面端启用增强对比
