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

浏览: 109 发布日期: 2016-12-13 分类: html5

今天是2016.12.13是南京大屠杀公祭日。不少相关站点都将网站全部变为灰色,以表示哀悼。

为了更多的小伙伴可以达成这种效果,在哀悼日可以表达一份哀悼。我们今天也来给出相关方法。

看下腾讯大苏网

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

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

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

*{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

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

img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

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

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

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

12.13大屠杀逝者安息

返回顶部