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

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

电脑技巧Git开源网2020-04-03 21:09:13162A+A-

网站页面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%);
}

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

点击这里复制本文地址 以上内容由Git开源网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

Git开源网_git开源代码资源网_git开源博客 © All Rights Reserved.  
文章中出现的商标及图像版权属于其合法持有人,只供传递信息之用,非商务用途。本站所上传资源,只用于交流学习所用。本站资源收集于网络以及网友投稿,其版权归原创者所有,如有侵害到你的权益,或有不妥之处,请联系我们删除,敬请谅解。Email:admin#gitoscc.com(#更换成@)
Copyright © Git开源网 All rights reserved. 黑ICP备18006154号-1 由ZBlog驱动

网站管理