让页面整体变灰

敞开掘金生长之旅！这是我参与「掘金日新方案 · 12 月更文挑战」的第8天，点击检查活动概况

最近，各大网站都变灰色（黑白色），以表示咱们对逝者的悼念。那么今日就说说，怎么方便快捷的完成这个功用。

一、写一套灰色的代码

假如不嫌费事的话，能够写一套彩色的代码和一套灰色的代码，这样不只能够完成功用还能够表现作业很忙，完成自己的人生价值。

二、经过css控制

假如你和我一样，也是一个懒散的程序员，能一行代码解决的问题，绝不多写一行，我推荐你使用这个办法。众所周知，拍照有滤镜，css也有，下面请今日的主角隆重上台。

filter，首先filter特点定义了元素(通常是<img>，其他标签也能够)的可视效果(例如：含糊与饱和度)。今日就说一下怎么修正所有元素的色彩为黑白 (100% 灰度)。

主要代码完成如下：

.gray {
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -ms-filter: grayscale(1);
  -o-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-filter: gray;
  filter: gray;
  -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
  filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

浏览器支撑

表格中的数字表示支撑该办法的第一个浏览器的版本号