IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

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

Solrex Shuffling 2010-04-27 13:48:13 累计浏览 3,495 次
本机暂存

这篇文章中给出了针对 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 来优化。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,349)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,848)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
  9. 什么是全栈工程师? (累计阅读 14,038)
  10. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)