灰度效果

案例

百度百科-乔任梁

body {
    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 ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");//firefox
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: gray;
    -webkit-filter: grayscale(1);
    }

案例中代码在IE中未实现灰度

原理

CSS3滤镜

body { -webkit-filter: grayscale(100%); }

CSS3滤镜目前还不属于标准属性，存在兼容性问题

可以使用 grayscale.js hack

使用方法：

//引入插件
<script type="text/javascript" src="grayscale.js"></script>

//调用插件
<script type="text/javascript">
    window.onload = function(){
        var el = document.getElementById( 'body' );
        grayscale( el );
    };
</script>

小知识

IE滤镜

img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法
img { filter:Gray; } //简写

IE系列浏览器都支持IE滤镜的这一属性，非IE浏览器不支持。