首页
/
网站建设
/
CSS教程
/
网站全站黑白灰哀悼滤镜CSS代码与多 CMS 实操部署指南分享

网站全站黑白灰哀悼滤镜CSS代码与多 CMS 实操部署指南分享

国家公祭日或重大悼念时网站常需切换为黑白灰色调表达哀思。本文分享一段简洁的CSS滤镜代码，通过html标签上的grayscale 100%滤镜，兼容webkit、moz、ms、o等多浏览器内核，并附IE的DXImageTransform方案，一键将整站变为黑白灰效果。

张文保 2022年12月8日更新 2026年5月8日 9 分钟阅读 4,508 阅读

每年到了特定的全国性哀悼日，或者遇到重大灾难、公众人物离世等需要表达哀思的时刻，许多中文网站都会把整站调成黑白灰色调。我自己运营的几个网站，包括地方资讯类项目，在过去几年里也都按需做过这种处理。这篇文章我把自己用过的几套滤镜方案、踩过的坑、性能与无障碍方面的注意点，一次性整理出来，希望能帮到同样在维护中文站点的同行。

一、为什么要做全站黑白灰处理

在国内的网络文化里，黑白灰几乎是约定俗成的哀悼视觉语言。把网站颜色去掉，本质上是在传达三件事：

第一，对事件本身的尊重。彩色页面在某些场景下会显得突兀，把饱和度抹掉是一种克制的表达。

第二，告诉读者“我们注意到了”。我做地方资讯站时，本地用户对这种细节非常敏感，能看出站长是不是有心。

第三，避免广告画面与哀悼氛围冲突。很多站点是有广告联盟代码的，黑白滤镜叠加上去之后，广告也会跟着变灰，不需要单独处理每一个素材。

我个人的判断标准很简单：只在官方明确发布哀悼公告时才上线，结束当天 0 点准时撤掉，不滥用、不蹭热度。这点后面会专门展开讲。

二、最常用的一段 CSS 滤镜代码

下面这段是我用了好几年的版本，几乎兼容所有现代浏览器，对老 IE 也做了降级处理：

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
}

几个细节解释一下：

把规则挂在 html 上而不是 body 上，是为了让滚动条、原生表单控件这些边缘元素也跟着变灰，覆盖范围最大。
-webkit-、-moz-、-ms-、-o- 这几个前缀针对早期 Chrome/Safari、Firefox、IE 边缘版本和 Opera。今天的浏览器已经基本只认无前缀的 filter，但保留前缀对老用户更友好，体积也只多几十字节。
progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) 是 IE 6~9 的私有滤镜，国内还有少量政企终端在跑这些版本，加上不会出错。
最后那行 _filter: none; 是 IE6 的 hack，避免某些老 IE 默认就拿到非空值导致渲染异常。

如果你只关心现代浏览器，可以直接简化成一行：

html { filter: grayscale(100%); }

三、把代码挂到 Typecho、WordPress、Z-Blog 上的具体做法

我自己跨这三套 CMS 都部署过这段代码，写一下最少改动的接入方式。

Typecho

登录后台 → 控制台 → 外观 → 编辑当前外观 → 找到 header.php，在 </head> 之前加：

<style>
html { filter: grayscale(100%); }
</style>

如果你的主题支持自定义头部代码（比如我自己用的 zhangwenbao-v2），就直接粘到“自定义 head 代码”那个输入框，避免改主题文件。

WordPress

后台 → 外观 → 自定义 → 附加 CSS，直接粘进去：

html { filter: grayscale(100%); }

这是最干净的方式，不会污染主题，切换主题也不会丢。

Z-Blog PHP

应用中心装一个“自定义 HTML 模块”，或者改主题的 header.php，在 <head> 内加同样的 <style>。Z-Blog 主题升级会覆盖文件，所以更推荐用模块管理器。

四、性能、兼容性与无障碍上的几个坑

这套方案表面上一行 CSS 就能搞定，但真上线之前我建议你至少检查下面这些点。

1. 移动端性能：filter 是 GPU 合成层属性，挂在 html 上意味着整页所有像素都要重新合成。低端安卓机滚动会出现轻微掉帧，特别是页面里嵌了大量图片或视频时。可以临时把懒加载阈值调小，减少同时合成的元素。

2. 视频与 iframe：grayscale 会一并影响嵌入的 B 站、YouTube 视频，以及第三方广告 iframe。这一点其实是想要的效果，但偶尔遇到合作方要求广告必须保持原色，这时只能写排除规则：

html { filter: grayscale(100%); }
.keep-color, .keep-color * { filter: grayscale(0%) !important; }

注意子元素要单独写一遍 filter: grayscale(0%)，因为父元素的 filter 会创建合成层，子元素无法仅用继承反向恢复。

3. 无障碍：完全去色之后，原本靠颜色区分的状态（比如表单错误红框、未读消息蓝点）会失去信息。临时上线问题不大，但如果挂超过一两天，要顺手检查表单和关键交互。

4. SEO：对搜索引擎没有任何影响，CSS 滤镜不进入索引，文档结构和内容完全没动。

五、定时上线和定时撤下的小脚本

手动改主题容易忘，我自己的做法是写一段最简单的“按日期生效”的代码。下面这段是我在 Typecho 主题 header.php 里用过的：

<?php
$mourning_dates = ['2022-12-08', '2024-01-01']; // 按需维护的哀悼日数组
$today = date('Y-m-d');
if (in_array($today, $mourning_dates, true)) {
    echo '<style>html{filter:grayscale(100%);}</style>';
}
?>

好处是：你可以提前几个月把日期填进数组，到了那天自动生效，第二天自动消失，不用半夜爬起来改代码。我维护多站时基本都是这套写法，简单可靠。

如果你的站走 CDN 缓存，记得这段输出要么放在不缓存的页面片段里，要么把缓存 TTL 设短一点，否则即使代码生效，用户拿到的还是缓存里的彩色版本。

六、一些我自己的取舍经验

做了这么多年站，关于黑白滤镜我有几条习惯，分享给同行参考：

只在官方公告日上线。地方性事件、行业内的私人哀悼，我个人不会动全站颜色，避免变成蹭流量。
首页和文章页统一处理，不要只改首页。读者从搜索引擎直接进文章页时如果还是彩色，会显得很奇怪。
后台不必跟着变灰。filter 只挂前台主题，wp-admin、Typecho admin 不动，自己看仪表盘还能正常分辨颜色。
提前测一遍 logo 和品牌色。某些品牌 logo 在去色后会变成一团糊的灰块，可以考虑临时换一张已经预处理过的灰度 logo，比纯靠 filter 自动转更可控。