让页面整体变灰

一、写一套灰色的代码

如果不嫌麻烦的话，可以写一套彩色的代码和一套灰色的代码，这样不仅可以实现功能还可以体现工作很忙，实现自己的人生价值。

二、通过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);
}
复制代码

浏览器支持

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