一行代码实现网站至灰：filter

发生重大灾害事故或其他哀悼日时，国企政府网站往往有网页全部置灰的需求。 最近，发生了一件悲伤的事，很多网站颜色置灰了，今天看一下他们是如何实现的，以及分享一个网页变灰的教程，相关使用技巧。

首页看看我们的csdn的

先看淘宝

 京东：

 今天教大家一行代码实现:

html {
     filter: grayscale(100%);
}

CSS 属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

<filter-function> 可以用于 filter 和 backdrop-filter 属性。它的数据类型由下列过滤器函数之一指定。每个函数需要一个参数，如果参数无效，则滤镜不会生效。以下是对滤镜函数含义的解释：

blur()：模糊图像
brightness() ：让图像更明亮或更暗淡
contrast()：增加或减少图像的对比度
drop-shadow()：在图像后方应用投影
grayscale()：将图像转为灰度图
hue-rotate()：改变图像的整体色调
invert()：反转图像颜色
opacity()：改变图像透明度
saturate()：超饱和或去饱和输入的图像
sepia()：将图像转为棕褐色

 filter 用法示例：

/* 使用SVG filter */
filter: url("filters.svg#filter-id");
/* 使用filter函数 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* 多个filter */
filter: contrast(175%) brightness(3%);
/* 不使用filter */
filter: none;
/* 全局变量 */
filter: inherit;
filter: initial;
filter: unset;

为了兼容 IE8 等其他低版本浏览器，我们可以加上浏览器前缀和 svg 滤镜。

.gray {
  -webkit-filter: grayscale(1);
  -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);
  filter: grayscale(100%);
}

我们还可以设置个定时任务，过一段时间后自动下线灰色这个功能，代码如下：

(function setGray() {
  var endTime = Date.parse("Apr 06 2077 00:00:01");
  var timestamp = Date.parse(new Date());
  if (timestamp <= endTime) {
    document.querySelector('html').classList.add('gray');
  }
})();

最后：

纪念我们敬爱的领导人永垂不朽。