原理

灰色其实是个比较复杂的颜色。从白色到黑色，有无数种灰色，那么这些不同的灰色，就可以代替我们网页中的五颜六色，使整个网页有不同色值的灰色，但是依然很有层次，而且又可以表达出一种深沉的感情。什么是灰度，用图片来解释就是：

我们知道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