在某些时候，需要把花哨的网站变为黑白样式，其实方法很多，网上大多比较赞同的都是下面这种方法，我也在自己的博客中试了下，这种好使，给大家分享分享。
- <style>
- html {
- overflow-y:scroll;
- filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
- -webkit-filter: grayscale(100%);
- }
- </style>
上面这种方法支持IE、Safari和Chrome等浏览器，但是不支持Firefox浏览器，优点是：稳定、速度快，而且资源占用小。大家可以动手试试。
除了以上方法外，当然还有其它很多方法，如：
方法一：使用grayscale.js插件。
这个插件是模拟IE的filter:progid，官网地址是：http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/。使用方法如下：
- <script src=”http://james.padolsey.com/demos/grayscale/grayscale.js” type=”text/javascript”></script>
- <script type=”text/javascript”>
- window.onload=function() {
- grayscale(document.body);
- }
- </script>
这种方法支持IE、Safari、Chrome、Opera和Firefox等浏览器。但缺点是在IE下也挺占资源的。
方法二：只支持IE，不支持Firefox和Chrome等非IE内核浏览器。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <style>
- html {
- filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
- }
- </style>
方法三：支持IE，不支持Firefox和Chrome等非IE内核浏览器。
- body {
- filter:gray
- }
注意：虽然这个方法代码量看起来最少，但效果并不好，而且打开网页也比较卡。
我用了最上面推荐的那种方法，好使，Good Luck！
