使网页变灰的方法

很多网站都设计了在某些日子使网页变灰,今天查了下,特将实现方法公布如下:
方法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测试下测试成功~~


12 条评论

  1. 边界说道:

    我大概是04年开始自己买空间玩.

  2. 边界说道:

    EMAIL输错,怪不得头像出不来

  3. 边界说道:

    这个东东,我08年5.12地震后用过一次。哈哈哈

    • kaisir.wang说道:

      @边界, 嗯嗯 08年那时候我还没有独立博客呢 哈哈 那时候我还在Sina博客混着哩~~看来边界拥有私人部落格已经好久了~~

  4. homer说道:

    没装什么插件呀 我在 CSS里 和 HEAD都尝试了一下。。。。难道是我的网页不规范?

  5. homer说道:

    那个变灰的代码貌似我用不起来,我用maxthon应该是没有问题的。。。奇怪了。。

    • kaisir.wang说道:

      @homer, 你看我的站有灰色效果么?这是IE的一个滤镜~~不行换IE访问试下?
      如果是你自己站加了没反应 确定是加在之间咯,看看是不是装了某种缓存的WP插件?

  6. MR.MA说道:

    哈哈,请问kaisir需要做网络推广么?

发表评论

(必填)

(必填)

(以便回访)