css实现网页黑白

特殊时候需要网页做出黑白效果，可以使用css3的滤镜

html {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

第一行对非IE浏览器生效，第二行是对IE浏览器生效（emmm…似乎浏览器就分为两种），本质上都是使用filter的grayscale属性，实现灰阶效果，灰阶是一种常用的图片滤镜。

filter滤镜的其他效果可以看：菜鸟教程

网页又不是图片，里面可能会有很多文本，为什么也能应用图片的滤镜呢？实际上网页在渲染到屏幕之前都会被栅格化成Canvas位图再画到屏幕上，所以filter处理的就是这张位图