支持多浏览器的网站变灰方法
浏览:3172次 出处信息
这篇文章中给出了针对 IE 浏览器的使网站变灰的方法，具体做法是在 CSS 文件的开头添加这样一行：
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
但是很遗憾这种方法并不能支持 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 来优化。
建议继续学习：
- 通过Nginx使全站页面变灰，哀悼玉树地震遇难者 (阅读：5350)
- 跨浏览器的HTML5占位文本(PlaceHolder)方案 (阅读：2542)
- [译]跨浏览器的多点触控与鼠标事件处理 (阅读：1949)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：十六进制HTML颜色
后一篇：CSS Sprites 是否有必要？ >>
文章信息
- 作者：Solrex Yang 来源： Solrex Shuffling
- 标签： 变灰 跨浏览器
- 发布时间：2010-04-27 13:48:13
近3天十大热文
-
[927] WordPress插件开发 -- 在插件使用 -
[133] 解决 nginx 反向代理网页首尾出现神秘字
-
[52] 如何保证一个程序在单台服务器上只有唯一实例（
-
[52] 整理了一份招PHP高级工程师的面试题
-
[50] 全站换域名时利用nginx和javascri
-
[50] 海量小文件存储
-
[50] 用 Jquery 模拟 select
-
[49] CloudSMS:免费匿名的云短信
-
[48] Innodb分表太多或者表分区太多，会导致内
-
[47] jQuery性能优化指南
