WordPress 教程：全站变灰代码（哀悼日/纪念日专用）

温馨提示：本文更新于2026-01-15，某些文章具有时效性，若有错误或已失效，请在下方留言！

在国家公祭日、重大灾难纪念日等特殊时刻，许多网站会将页面整体变为灰色以表达哀思。好软猫为你提供一段轻量、高效的全站变灰代码，只需将其添加至 WordPress 主题的 header.php 或通过自定义 CSS 功能启用，即可一键实现全站（包括图片、文字、背景）灰度显示。操作简单、无性能负担，适用于任何主题，符合庄重肃穆的纪念氛围。

方法 1

将下面代码加入 wordpress 在后台外观，自定义里面的额外 css 里即可，加在主题选项里的 css 里就可以了，到前台刷新一下，网页变灰色了吧，包括网站的广告、图片等整个网页变黑白了。

变灰 CSS 代码

html{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter: grayscale(100%); /*opera*/ filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray; /*ie9- */ }

方法 2

代码加到<head>和</head>之间，即可直接实现全站灰色效果。

代码

<!–[if IE]> <style> html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } </style> <!–<![endif]–> <!–[if !IE]><–> <style> html{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(“data:image/svg+xml;utf8,<svg xmlns=\”http://www.w3.org/2000/svg\”><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\”/></filter></svg>#grayscale”); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: gray; -webkit-filter: grayscale(1); } </style> <!–<![endif]–>

恭喜你发现了宝藏导航！>>点此前往<<

本站资源大部分来源于网络，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！

获取更多优质资源按Ctrl+D收藏我们

1 如果您喜欢本站点击这儿赞助本站
2 帮助：下载说明 | 会员权益 | 广告合作
3 修改版本安卓及电脑软件，加群提示为修改者自留，非本站信息，注意鉴别；
4 本网站部分资源来源于网络，仅供大家学习与参考，请于下载后24小时内删除；
5 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请联系站长进行删除处理；
6 如若转载，请注明文章出处：

THE END