漏勺网

哀悼日网站页面CSS使页面变灰色代码

网站页面CSS使页面变灰色代码,当然网站全站变为灰色也有一定的意义,比如相关站点都将网站全部变为灰色,以表示哀悼。

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院今天发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。

纯CSS实现:

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

CSS使用filter滤镜,filter: grayscale 使用可以调整元素的灰度值

整站html页面变全灰色:(推荐)

/*页面变灰*/html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);}

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

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%);}

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


本文链接:https://www.loushao.net/wangye/487.html

版权声明:

从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!

如果遇到其他问题可到问答社区进行提问!“进入问答社区”

本站发布的内容若侵犯到您的权益,[email protected],我们将及时处理!

本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。

本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。

若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。

发表评论

您需要 登录账户 后才能发表评论

还没有评论,快来说点什么吧~

联系客服
网站客服 业务合作 Q交流群
8063636
返回顶部