poxiaoxi博客有些网站会在纪念日、哀悼日或特殊公共事件期间，把页面临时调整为灰色效果。这个效果通常不需要逐张修改图片，也不需要重新设计整站样式，只要在网页上加一段CSS灰度滤镜即可。
从实现方式看，网页变灰主要依赖CSS里的filter: grayscale(100%)。它的作用是在浏览器渲染页面时，把元素显示为灰度效果。原始图片、Logo、背景图和CSS文件不会被真正修改，等代码移除后页面会恢复原样。
最简单的写法
如果只是想让整个网站立即变灰，可以把下面这段CSS放到网站公共样式文件、主题自定义CSS或页面头部样式中。
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}这段代码会让整个页面呈现灰度效果，包括文字、图片、按钮、背景、Logo和图标。多数情况下，写在html元素上就够了，不建议在大量子元素上重复添加滤镜，否则可能带来额外渲染开销，部分页面还可能出现显示异常。
如果发现某些页面没有生效，也可以尝试写成下面这种形式，但正式使用前建议先测试。
html,
body {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}推荐用class控制
直接把灰度代码写死在html上，适合临时手动处理，但不太方便开启和关闭。更推荐的做法是定义一个class，需要变灰时再通过HTML或JS添加这个class。
html.site-gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}然后通过JS控制开启：
document.documentElement.classList.add('site-gray');需要关闭时移除class：
document.documentElement.classList.remove('site-gray');这种方式的好处是管理更清楚。平时CSS可以一直保留在网站中，只有在需要纪念日置灰时，才用JS或后端模板给html添加site-gray这个class。
指定日期自动变灰
如果网站每年固定在某些日期变灰，可以用JS判断日期。比如每年4月4日、12月13日自动开启灰度效果，可以这样写：
<style>
html.site-gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
<script>
(function () {
var today = new Date();
var month = today.getMonth() + 1;
var day = today.getDate();
var grayDays = [
'4-4',
'12-13'
];
var currentDay = month + '-' + day;
if (grayDays.indexOf(currentDay) !== -1) {
document.documentElement.classList.add('site-gray');
}
})();
</script>这段代码适合固定纪念日。grayDays数组里写需要置灰的日期，格式是月-日。如果后续还要增加日期，只需要继续添加即可。
不过，这种写法使用的是访问用户本地设备时间。如果用户电脑或手机时间不准确，显示结果也可能不准确。对要求严格的网站，可以改成由服务器端判断日期，再输出对应class。
指定时间段开启
有些场景不是每年固定某一天，而是某个具体时间段需要置灰。例如从某天0点开始，到第二天0点结束，可以使用时间戳判断。
<style>
html.site-gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
<script>
(function () {
var now = new Date().getTime();
var start = new Date('2026-12-13 00:00:00').getTime();
var end = new Date('2026-12-14 00:00:00').getTime();
if (now >= start && now < end) {
document.documentElement.classList.add('site-gray');
}
})();
</script>这种方式更适合临时活动、特殊公告、纪念页面等一次性场景。使用时要注意时区问题，尤其是面向多地区用户的网站。如果站点主要面向中国大陆用户，最好用服务器时间统一控制，不要完全依赖用户本地时间。
WordPress怎么加
如果网站使用WordPress，可以把CSS放到主题的“自定义CSS”里，也可以通过代码插入插件添加到全站头部或页脚。最简单的全站置灰版本如下：
<style>
html.site-gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
<script>
document.documentElement.classList.add('site-gray');
</script>如果只需要某一天开启，就把前面“指定日期自动变灰”的代码放到全站页脚。这样不需要改主题模板，也方便后续删除或关闭。
不建议直接修改WordPress核心文件。比较稳妥的方式是使用子主题、主题自定义代码区域，或者代码管理插件。否则主题更新后，手动添加的代码可能会被覆盖。
哪些内容会变灰
使用filter: grayscale(100%)后，页面中的大部分可见内容都会变灰，包括图片、文字、SVG图标、背景图、按钮、导航栏和表单控件。
但有些第三方内容不一定完全受控制。例如跨域iframe、第三方广告、嵌入的视频播放器、地图组件等，可能因为嵌套页面和浏览器安全策略，表现不完全一致。正式上线前，最好检查首页、文章页、产品页、列表页、移动端页面和包含第三方组件的页面。
如果某个区域不想变灰，可以单独覆盖滤镜，但这种需求较少。纪念日全站置灰通常追求整体统一，不建议保留太多彩色元素，否则视觉上会显得不协调。
性能影响要注意
CSS滤镜属于浏览器渲染效果，一般网站临时使用问题不大。但如果页面本身元素很多、动画很多、图片很大，给整个页面加滤镜可能会增加一定渲染压力，尤其是在移动端低性能设备上更明显。
所以，网页变灰代码虽然简单，但仍然建议提前测试。可以打开手机浏览器检查滚动是否流畅，表单是否正常输入，弹窗和菜单是否正常显示。如果网站有复杂动画或大面积视频背景，更要确认灰度效果不会带来明显卡顿。
不要改原始素材
有些站长会想到把Logo、Banner、文章图片全部重新处理成灰色，这种做法不推荐。它不仅工作量大，还容易遗漏图片，后续恢复也麻烦。
CSS滤镜的优势是可逆、统一、低成本。加上代码全站变灰，移除代码全站恢复，适合临时纪念日场景。除非网站有非常特殊的品牌要求，否则不需要逐个修改图片文件。
上线前检查清单
正式启用网页灰度效果前，可以按下面几个点检查：桌面端和移动端是否都生效；首页、栏目页、详情页是否正常；导航、搜索、表单、按钮能否点击；弹窗、客服、广告、视频等第三方组件是否异常；页面滚动是否卡顿；活动结束后是否能及时关闭。
如果是重要网站，建议提前一天在测试环境验证。等纪念日当天再临时加代码，容易因为缓存、主题结构或插件冲突导致效果不稳定。
实际使用怎么选
如果只是临时手动变灰，用最简单的CSS写法即可；如果需要随时开关，建议使用class控制；如果是固定纪念日，可以加JS日期判断；如果时间要求严格，最好由服务器端控制是否输出灰度class。
网页变灰本身并不复杂，关键是不要影响网站正常使用。对大多数网站来说，filter: grayscale(100%)已经能满足纪念日全站置灰需求，配合JS控制开关，就可以实现比较稳妥的临时灰色模式。
精彩评论