首先，把网站做成一个纯灰色主题，最简单直接的办法就是给整个网站加一个滤镜，就像我们平时自拍完给照片加喜欢的滤镜一样。
我们的网页也可以加滤镜，但不是在整个网页上面遮一个div蒙版，而是让整个网页只有灰色 。
原理
灰色其实是个比较复杂的颜色。从白色到黑色，有无数种灰色，那么这些不同的灰色，就可以代替我们网页中的五颜六色，使整个网页有不同色值的灰色，但是依然很有层次，而且又可以表达出一种深沉的感情。什么是灰度，用图片来解释就是：
我们知道RGB代表三个颜色，Red、Green、Blue。rgb(0255,0255,0~255) 三个颜色数值的大小结合，形成不同的颜色。但是当我们把三个颜色的数值调成同一个数字的时候，形成的颜色就是灰色（可以回忆我们小时候捏橡皮泥，我们是怎么把不同颜色一起揉捏，捏出来的灰色）。 所以灰度图像是有256种颜色的（从0到255），即r、g、b的三个数值依然保持一致。 灰度越淡颜色越白，灰度越浓颜色就越黑。
实现
简单说完灰度。我们再来看下css中有哪些滤镜：
毫无疑问，做清明节灰色主题的网页，我们要选择灰度grayscale这个滤镜。
属性写法：
filter: grayscale();
filter是 滤镜 属性，grayscale是 灰度 属性值，grayscale括号里面可以是0、1或者百分比、小数or something？
括号里的数值越大，灰得越彻底。数值越小，原本的五颜六色保留得越好。
我们的网站要做纯灰色，也就是灰得最彻底，所以括号里应该是100%。
filter: grayscale(100%);
-webkit-filter: grayscale(100%); //兼容chrome和safari和2013年后Opera
-moz-filter: grayscale(100%); //兼容Firefox
-ms-filter: grayscale(100%); //兼容IE、Edge
-o-filter: grayscale(100%); //兼容2013年前的Opera
这段代码是我们必须要写的。基础属性写完后，补上一些兼容不同浏览器的属性。
代码严谨进阶
filter是CSS3的属性，我们知道一些较低版本的IE对CSS3的兼容性不是很好，但是老版本的IE中我们依然可以实现滤镜的效果：
filter: url(data:image/svg+xml;utf8,#grayscale); //兼容IE10、IE11
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); //兼容IE6～9
