网站全站置灰悼念CSS代码 WordPress网页变灰教程
一、前言
在伟人逝世纪念日、重大悼念纪念日等庄重场景中，多数正规网站会开启全站置灰效果，以黑白色调页面表达缅怀与致敬。网站置灰仅为前端视觉样式调整，不会修改网站数据、源码结构与业务功能，部署简单、生效迅速、关闭便捷。
![图片[1]-网站全站置灰悼念 CSS 代码 WordPress 网页变灰教程-服务器测评_云 VPS 推荐_运维技术教程与源码分享 - 环球云域数据平台 cloudidc.vip](https://cloudidc.vip/wp-content/uploads/2026/09/20260903164947758-网站黑白.webp)
该方案分享一套通用、兼容全部浏览器、无弹窗BUG的网站置灰CSS代码，适配WordPress、静态HTML、企业官网、各类开源程序等所有网站，站长可按需部署使用。
二、稳定可用代码（已修复弹窗BUG）
网上多数教程使用 html 标签滤镜，容易导致弹窗、悬浮按钮、固定定位模块渲染错乱。本文已优化为 body 标签渲染，兼容性更强、无布局BUG，是目前较为稳妥的全站置灰方案。
1、完整页面头部部署代码（适合所有网站 / WordPress header.php）
<style type="text/css">
body {
/* 兼容老旧IE浏览器 */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/* 兼容webkit内核浏览器（Chrome、Edge、手机浏览器） */
-webkit-filter: grayscale(100%);
/* 标准通用灰度滤镜 */
filter: grayscale(100%);
}
</style>2、WordPress自定义CSS专用代码（无需style标签）
body {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}三、详细部署教程（WordPress 专属）
方案1：修改 header.php 头部文件（整站生效）
1、登录 WordPress 网站后台，进入「外观」-「主题文件编辑器」；也可通过 FTP、宝塔文件管理找到当前主题目录。
2、找到并打开 header.php 头部文件，定位到页面 <head></head> 标签内部。
⚠️ 核心避坑提醒：优先修改子主题文件！直接修改父主题，后续主题版本更新会直接覆盖代码，导致置灰效果失效。
3、将上方带 style 标签的完整代码粘贴进去，保存文件。
4、清理浏览器缓存、网站缓存、CDN缓存，刷新页面即可全站变灰。
5、悼念结束后，直接删除这段代码，网站立刻恢复彩色正常显示。
方案2：后台自定义CSS部署（稳妥、强烈推荐）
该方式无需修改主题源码，不担心主题更新丢失代码，操作简单、安全性高，适合新手站长。
1、WP后台 → 外观 → 自定义 → 附加CSS（Additional CSS）
2、粘贴上面纯CSS代码（无需style标签），保存设置
3、清空缓存刷新页面，全站置灰生效；结束后删除CSS即可恢复。
四、普通网站通用部署方法（非WordPress）
静态HTML、企业官网、自适应模板、各类CMS程序通用：打开网页首页源码，在 <head> 标签内粘贴完整带style的代码，保存文件并上传服务器，刷新即可生效，适配绝大多数网站程序。
五、进阶功能：局部保留彩色效果
如需网站个别模块保持彩色（如Logo、公告图标、特殊按钮），可使用以下解除置灰代码，单独指定元素恢复原色。
.no-gray {
filter: none !important;
-webkit-filter: none !important;
}使用方式：给需要彩色的DIV、图片、标签添加 class no-gray 即可。
示例：
<img src="logo.png" class="no-gray">六、常见问题排查（解决失效问题）
- 代码添加后不变灰：优先清理浏览器缓存、网站缓存、CDN缓存；CDN站点必须手动刷新节点缓存，否则无法生效。
- 页面弹窗错乱、悬浮异常：本文已采用 body 渲染方案，规避 html 滤镜带来的布局BUG，稳定性更好。
- 移动端不生效：代码包含webkit内核前缀，适配手机、平板浏览器。
- 效果时好时坏：大概率是缓存残留，清空全站缓存即可解决。
七、使用注意事项
- 置灰效果仅为前端视觉展示，不会改动网站源码、图片、数据，安全性高。
- 仅适用于庄重缅怀、纪念悼念场景，请勿随意滥用。
- 效果随时可开关，删除代码即刻恢复正常彩色页面。
- 兼容 Windows、Mac、安卓、iOS 全平台设备。
八、免责声明
本文提供的CSS代码仅为前端技术学习、正规场景悼念展示使用，所有部署操作由站长自主完成。使用者需遵守网络相关法律法规与平台规范，合理使用网站置灰效果，因违规使用产生的相关问题由使用者自行承担。
![表情[baoquan]-服务器测评_云 VPS 推荐_运维技术教程与源码分享 - 环球云域数据平台 cloudidc.vip](https://cloudidc.vip/wp-content/themes/zibll/img/smilies/baoquan.gif)
暂无评论内容