使用css3将整个网站变成黑白色调

有时候进行哀悼活动时，身为站长的我们都会响应国家的号召让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念，通过几行简单的代码，来实现这个功能

1、css实现

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

2、svg实现

//gray.svg<svg version="1.1" 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>

然后通过css调用

html{
  -webkit-filter: url('./gray.svg#grayscale');
  -moz-filter: url('./gray.svg#grayscale');
  -ms-filter: url('./gray.svg#grayscale');
  -o-filter: url('./gray.svg#grayscale');
  filter: url('./gray.svg#grayscale');
}

之前效果：

之后的效果：

语法解释：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale