摘要:我们注意到,在今年4月4日举行全国性的哀悼活动时,许多主流网站将网站变成了灰色,黑白色调肃穆庄严,我也想在哀悼活动时将网站变灰以示哀悼。
我们注意到,在今年4月4日,为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,举行了全国性的哀悼活动,而许多主流网站在当天都将网站变成了黑白色调,肃穆以示哀悼。
这是政府秉持“以人民为中心”的执政理念,体现了国家对逝去的生命的尊重,举行类似哀悼活动也会成为常态。因此,我们也会想在哀悼活动时将网站变灰,以表示自己的哀悼之情。
发现要实现全站变灰的功能,并不复杂,只需将以下代码加到网站的外观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- */
}
以我们用 WordPress 程序搭建的网站为例,具体操作如下:
1、进入WordPress后台,外观–自定义–额外CSS;
2、将代码粘贴写入,点击“发布”。
到前台刷新一下,网页已经变成灰色,包括网站的广告、图片等整个网页变黑白了。

如果我们只想将其中某一篇文章则灰色处理,则可将代码更换为如下:
.post-template-default.single.single-post.postid-1118.single-format-standard {
-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- */
}
其中数字1118,即目标文章的ID,可以在“文章”列表中查看到:post=1118。如果是有多篇,则简单地添加多段相同代码,更换为不同的文章ID即可。
点击查看单个文章页变灰的效果。
历史上的今天:
- 2019: 88VIP没有优酷会员了吗?No,原来是你少做了这一步(12)
- 2017: 搜狗上市,启用国际化新域名 sogo.com(6)
- 2009: Google Doodle:《芝麻街》动画片上映40周年纪念(1)
- 2007: Feedsky 订阅数也跳舞(0)
- 2005: 考试(0)
全黑一片?哈,访客还以为你的网站被黑了呢。
就想变黑