使网页变灰的方法

很多网站都设计了在某些日子使网页变灰,今天查了下,特将实现方法公布如下:
方法1:只需要在页面head之间插入:
<style>
html { filter:progid:DXImageTranorm.Microsoft.BasicImage(grayscale=1); }
</style>
方 法2:在css文档种加入以下代码
html { filter:progid:DXImageTranorm.Microsoft.BasicImage(grayscale=1); }
不过目前看来这种方法对FireFox不起作用~~囧…如果大家有对火狐起作用的方法欢迎留言交流~~
示例效果只要用IE访问Kaisir的部落格就应该可以看到咯~~

PS:
看Kaisir某段时间的浏览器统计情况饼图,使用IE的用户还是不少的,占了所有用户的73.07%
看来我得加强下部落格针对IE的CSS显示效果了…目前针对IE还是有不少问题的……囧….
2010-4-21日16:44 更新可以使Firefox等内核浏览器变灰的方法,方法来源于solrex.org

但是很遗憾这 种方法并不能支持 Firefox 和 Chrome。这篇博客介绍一种支持各种浏览器的网站变灰方法,试验其支持 Firefox、Chrome 和 IE,据说可以支持 Opera(未测试),方法比较简单,就直接介绍步骤了。
1. 到这里下载 grayscale.js 文件到你网站的根目录(或者也可以不下载,直接引入该 js,未测试)。
2. 在网站的 footer 或者 header 等全局的文件中插入以下代码(注意,$() 和 .load handler需要 jquery.js 的支持,不使用 jquery 的同学可以自行搜索解决标签查找和 window onload 事件处理问题,例如这 里这里):

<script type=”text/javascript” src=”/grayscale.js”></script>
<script type=”text/javascript”>
$(window).load(function () {
grayscale( $(‘body’) );
});
</script>
(请将以上代码中出现的全角及中文字符替换为英文)

该方法的缺点 是:
1. 页面加载完后才对整个页面进行变灰操作;
2. 在非 IE 浏览器中不支持来自其它域名的网站图片的变灰;
3. 造成非 IE 浏览器在加载完页面后进行大量 js 计算,该计算负担可以通过仅变灰 img, a 等标签而不是 body 来优化。

Kaisir于2010年8月15日 在FireFox测试下测试成功~~