哀悼日网站全站变灰CSS代码

哀悼日网站全站变灰CSS代码

四月 04, 2020

今天2020-04-04为了哀悼在抗击新冠肺炎斗争中的牺牲烈士和逝世同胞,不少相关站点都将网站全部变为灰色,以表示哀悼。

看下哔哩哔哩

image-20200404002945393

这种效果是用纯CSS来实现的。

全站变灰代码

如果你想全站变灰,代码如下

1
2
3
4
5
6
7
*{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

如果你想只对于网站图片来实现灰度,代码如下

1
2
3
4
5
6
7
img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

如果只想针对部分图片,代码如下

1
2
3
4
5
6
7
8
/*这段代码只会对于class位grey的图片*/
img.grey{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

这是互联网行业的哀悼方式。

4月4日,愿逝者安息,愿生者奋发,愿祖国昌盛。

如何关掉b站的变灰效果

image-20200404003909614

打开控制台,搜索filter,找到这样一行css代码,关掉就变成彩色了,代码如下

-webkit-filter: grayscale(.95);

参考资料

哀悼日网站全站变灰CSS代码

b站全灰,原来仅需一行css代码——css 滤镜