4月4日是中国的传统节日--清明节,当天全国举行了哀悼活动,以此表达对全国各族人民对抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞深切哀悼。在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动。
4月4号当天你打开任何网页、视频网站,基本都是灰色的。他们是怎么实现的呢?使用了 css3 的滤镜 filter。
filter:grayScale(100%);
举个例子:比如 google 网站,在 body元素中加入 filter 滤镜,整合网站就会变灰,如图:
通用写法:
html {
filter: grayscale(100%);
-webkit-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);
}
如果只想网站某个部分变灰,可以单独写个类,在需要的地方加上这个样式。