悼念日到了,临时给全站加一行灰度滤镜

网站变灰 使用文档
网站变灰 使用文档

哀悼日的前一天下午,很多站都会遇到同一件事:需要把整站变灰。

临时改 CSS 是最直觉的做法,但改哪儿是个问题:主题样式分散在几个文件里,图片、视频、渐变背景都要处理,改漏了某个区块就会露出彩色。而且第二天还得改回来。

网站变灰模块把这个动作变成后台一个开关。

只有两个档位

配置页一个选项:全局变灰。

  • 关着(默认):只让首页变灰;
  • 打开:整站变灰。

用 CSS 滤镜实现,一行 filter: grayscale(100%) 挂在页面上,图片、视频、按钮、渐变背景全部跟着变灰,不用一个个改。

变灰后的首页:整页的图片和文字都呈灰度,只有内容结构还清晰

「只让首页变灰」这个默认值值得说一下。它的实际用途不是哀悼日,而是活动期间让落地页统一成黑白风:首页做黑白设计,内页还是正常配色,视觉上有对比。

用的时候注意

开关是手动的。 模块不判断日期,不会自动在某个日子变灰、第二天自动恢复。到点开、过点关,得有人记着。

忘了关是常态。 建议在打开的那一刻就在日历上设一个提醒,或者找个人互相提醒。整站灰着过了一周,用户会以为站出故障了。

变灰不等于停运。 有些站在哀悼日会同时停掉娱乐内容、促销入口。这个模块只管颜色,别的都要手动处理。

截图会一起变灰。 灰度滤镜作用在渲染层,用户在页面上截图存下来也是灰的。这通常是想要的,但如果站里有「保存海报」这类功能,生成的图不会经过滤镜,两边会不一致。

什么时候用

哀悼日。这是这个模块最标准的场景。

纪念日。有些站会在特定纪念日做黑白专题。

活动视觉。黑白风格的促销页,用这个开关比改一套模板快。

不建议长期开着。灰度会显著降低图片的吸引力,电商、图库、视频这类以视觉为主的站,长期灰着等于自废武功。

更新: 2026-11-13 19:25:17
QQ
微信
客服