技术教程

全国哀悼日,几行代码让整个网站变成灰色

微信扫一扫,分享到朋友圈

全国哀悼日,几行代码让整个网站变成灰色
0 0

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

一般这种时候,大部分知名网站都会将页面设置成了灰色。

那么要如何实现这种灰色效果呢?

我们只需要一句css代码:filter: grayscale(100%);
放到body元素的样式里即可

也可以直接在网页/模板的HTML代码<head>和</head> 之间插入:

<style>
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);
}
</style>

或者

html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}

效果如下:

XPath语法总结

上一篇

C#俄罗斯方块游戏 Visual Studio完整项目源码下载

下一篇

你也可能喜欢

发表评论

插入图片
全国哀悼日,几行代码让整个网站变成灰色

长按储存图像,分享给朋友