很好，这篇主要是mark用，方便以后再翻阅

首先是用到CSS的filter属性，最开始貌似是IE4开始加的私有属性，可以实现透明、模糊、阴影、发光、灰度等效果，代码是长这样式儿的：

filter: gray /* IE6 - IE9 */

再后来IE10就开始抛弃这个属性了，但是CSS3借鉴了这个做法，标准的CSS Filter方案里面可以支持grayscale灰度、sepia褐色、saturate饱和度、hue-rotate色相旋转、invert反色、opacity透明度、brightness亮度、contrast对比度、blur模糊、drop-shadow阴影等十种效果，然后代码是长这样式儿的：

filter: grayscale(100%);    /* 标准写法 */ 

然后对各个浏览器再单独加前缀

css filter的浏览器兼容情况是这样的： 

        Chrome31+，

        Safari7+，

        Opera20+，

        ios Safari6+,

        Android Browser4.4+,

        Blackberry 10+均支持了-webkit-filter的方式，

但是：

        IE不支持，firefox不支持

再然后呢，Firefox虽说不支持css filter，但是支持svg effects for html，html文件可以调用svg里面的效果，不仅仅是滤镜、还可以是mask、clip等

然后呢，Firefox下我们可以写成这样的：

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"); /* Firefox 3.5+ */

很好，现在就只剩下 IE10 和 IE11 了，那么有什么办法呢？

呵呵，很高兴的告诉你，CSS不行！

但是我们可以用js

http://james.padolsey.com/demos/grayscale/grayscale.js

这个插件，引进来以后用

grayscale(document.body);

执行生效

但是 ---- 注意！！！！！

这货执行起来非常的慢，并且后面如果后续的动态修改的dom是不生效的，所以不建议使用

然后那我们的CSS就可以写成这样：

html {
        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"); /* Firefox 3.5+ */
        -webkit-filter: grayscale(100%); /* chrome+ */
        filter: grayscale(100%); /* 未来浏览器 */
        filter: gray; /* ie6-8 */
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*ie6-9 */
}

恩恩，大概就长这样儿，不兼容 IE10 和 IE11

貌似还有几个jQuery的插件，但是没有去试，如果有发现好的欢迎留言告诉我～

最后，为鲁甸祈福～