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

1个月前更新

065471

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

在国家公祭日、重大灾难纪念日等特殊时刻，许多网站会将页面整体变为灰色以表达哀思。好软猫为你提供一段轻量、高效的全站变灰代码，只需将其添加至 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); /* IE6-8 兼容 */
    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 id=\"grayscale\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.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