如何通过代码让整个网站变灰色
在一些严肃的日子,例如全国哀悼、纪念杰出伟人,烈士同胞……这种时刻很多互联网平台都会呈现灰色页面,以此哀悼。
身为站长我们也应当如此,给大家分享如何通过代码实现此功能。
身为站长我们也应当如此,给大家分享如何通过代码实现此功能。
在全站的CSS中写入下面二条中的一条:
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
body {
filter: gray;
}
页面变灰——在head 标签之间插入:
<head>
<style type="text/css">
html {FILTER: gray}
</style>
</head>
/*WordPress站点*/
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);
}
document.getElementsByTagName('body')[0].style.filter = 'grayscale(100%)';
body {
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/* Chrome, Safari */
-webkit-filter: grayscale(1);
/* Firefox */
filter: grayscale(1);
}
<!-- 全国哀悼 -->
<style>
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
</style>
0条评论