码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-05-19 10:56:53      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:div   pre   web   span   哀悼   实现   方法   网站   content   

今天是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大屠杀逝者安息

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

标签:div   pre   web   span   哀悼   实现   方法   网站   content   

原文地址:https://www.cnblogs.com/jlfw/p/12915341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!