如何通过代码让整个网站变灰色

分类栏目:案例分享

231

在一些严肃的日子,例如全国哀悼、纪念杰出伟人,烈士同胞……这种时刻很多互联网平台都会呈现灰色页面,以此哀悼。

身为站长我们也应当如此,给大家分享如何通过代码实现此功能。

在全站的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>