支持多浏览器的网站变灰方法

网站变灰的方法在google里面搜，有很多都是用的Microsoft的滤镜方法，但是，这个css并不支持Firefox, Chrome等浏览器，下面的方法就是为了让灰白能够实用于绝大多数浏览器。 首先，在css里面添加：

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

1. 下载附件，解压 grayscale.js 文件到你网站的根目录。

2. 在网站的 footer 或者 header 等全局的文件中插入以下代码（注意，$() 和 .load handler需要 jquery.js 的支持，不使用 jquery 的同学可以自行搜索解决标签查找和 window onload 事件处理问题。）：

   <!--[if !IE]><!-->
   <script type="text/javascript" src="/grayscale.js"></script>
   <script type="text/javascript">
   	$(window).load(function () {
   		grayscale( $('body') );
   	});
   </script> 
   <!--<![endif]-->

   加上

   <!--[if !IE]><!-->
   	...
   <!--<![endif]-->

   的目的是只有非IE的浏览器才调用此js，这样就避免了在IE7,IE8的png灰度问题。 该方法的缺点是：

3. 页面加载完后才对整个页面进行变灰操作；

4. 在非 IE 浏览器中不支持来自其它域名的网站图片的变灰；

5. 造成非 IE 浏览器在加载完页面后进行大量 js 计算，该计算负担可以通过仅变灰 img, a 等标签而不是 body 来优化。