转自：http://www.cnblogs.com/huanlei/archive/2013/04/23/3039012.html#2679947
IE浏览器中用了滤镜来解决
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
chrome下
-webkit-filter: |
IE+火狐+chrome
html filter: -webkit-filter: -moz-filter: -ms-filter: -o-filter: filter: filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter:} |
大面积的操作降低页面性能是肯定的，这里分享这个也只是想跟大家说一下，最近我看到这个样式，感觉太厉害了。在这个样式代码中，涉及到了一个文件，就是desaturate.svg，从文件扩展名中可以看到，利用到了SVG技术了，代码如下：
<filter"grayscale"><fecolormatrix"matrix" values="0.3333 0.3333 0.3333 0 </filter> </svg> |
只需要将这代码保存为desaturate.svg，再通过url链接就可以了，十分简单。在前面看到的demo页面中是在body中增加了样式，影响页面中所有的元素，如果有需要的话，可以单独设置一个公共库中的类名来调用，如：
.pic_gray filter: -webkit-filter: -moz-filter: -ms-filter: -o-filter: filter: filter: -webkit-filter:} |
完美兼容，或者直接在css里添加：
<style type="text/css"> html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);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");filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);} </style>