全站置灰最直接方案是给body设置filter: grayscale(100%)，现代浏览器均支持；需补充overflow: hidden并注意弹层、iframe、字体图标等边界情况。
全站置灰用 CSS filter 最直接
不需要改 HTML 结构或 JS 逻辑，filter: grayscale(100%) 是最轻量、兼容性最好的方案。现代浏览器（Chrome 53+、Firefox 35+、Safari 6.1+、Edge 12+）都支持，Layui 本身不干预页面样式，所以直接作用于 body 即可生效。
常见错误是只给某个容器加滤镜，结果弹层（如 layer.open 弹窗、laydate 日历面板）没灰掉——因为它们默认用 position: fixed 或挂载到 document.body 底层，必须确保滤镜作用在顶层容器上。
- ✅ 正确做法：给
body加filter，并补充overflow: hidden防止滚动条干扰视觉一致性 - ⚠️ 注意：IE 完全不支持
filter: grayscale，若需兼容 IE，得回退到 SVG 滤镜或 canvas 覆盖（极不推荐，维护成本高） - ? 小技巧：加
transition: filter 0.3s让开关更平滑，避免突兀闪变
一键开关建议封装成独立函数
别把逻辑散落在各处，尤其当需要响应后台配置（比如从接口读取“是否启用哀悼模式”）时，统一入口才可控。Layui 项目通常有全局 JS 入口（如 index.js 或 common.js），在这里定义 toggleGrayscale 最合适。
示例：
function toggleGrayscale(enable) {
const body = document.body;
if (enable) {
body.style.filter = 'grayscale(100%)';
body.style.overflow = 'hidden';
} else {
body.style.filter = '';
body.style.overflow = '';
}
}
// 调用
toggleGrayscale(true); // 开启
toggleGrayscale(false); // 关闭
- 不要用
classList.add/remove管理 filter——CSS 类无法覆盖内联 style 的优先级，容易失效 - 如果用了 Layui 的
layer，注意它创建的浮层 DOM 在body下，所以body滤镜天然生效，无需额外处理 - 若页面有
iframe（比如嵌入地图、视频），其内容不会被父页 filter 影响，需单独控制或提示“外部资源不参与置灰”
和 Layui 主题色/图标冲突怎么办
Layui 默认图标（如 layui-icon）本质是字体图标，grayscale(100%) 会把它变灰，但文字颜色（如按钮文字）若原本就是灰色，可能对比度不足导致看不清。这不是 bug，而是滤镜对所有像素一视同仁的结果。
- ✅ 解决方法：在开启置灰时，同步微调关键文本色，例如给
.layui-btn加color: #333 !important（仅当灰度后文字发虚时才加） - ❌ 不要试图用 JS 遍历所有元素改 color——滤镜已生效，再改色只会让颜色叠加灰度，更难看
- ⚠️ 特别注意：Layui 的 loading 动画（
layui-icon-loading）旋转时若灰度太重，可能感知不到动效，可临时替换为纯 CSS 动画或静默提示
上线前必须验证的三个边界点
置灰不是加个样式就完事，真实场景下容易漏掉这些：
- 移动端：iOS Safari 对
filter在fixed元素上偶有渲染异常，务必真机测试弹窗、下拉刷新组件是否同步灰化 - 富文本内容：若页面含
layedit编辑器，其 iframe 内容不受父页 filter 影响，需在初始化时注入内联样式html { filter: grayscale(100%) } - 服务端渲染（SSR）或静态页：如果首页是后端吐出的 HTML，记得把
body的style="filter: grayscale(100%)"也写死进去，避免首屏闪白
最麻烦的其实是时间精度——公祭日往往精确到小时，别只靠前端定时器切换，得和服务端时间对齐，否则用户本地时间不准会导致误开/误关。
