当前位置:园子博客 » 经验技巧 » IE6中 PNG 背景透明的最佳解决方案

IE6中 PNG 背景透明的最佳解决方案

10月 23rd, 2010 | Filed under 经验技巧 | 共有15,854次浏览

很多做网站的朋友在处理浏览器兼容性的时候,都遇到了在IE6 下 PNG 背景图片不透明的问题,本文园子就分享下在 IE6 中如何使 PNG 背景图片变为透明

为什么要使用 PNG 图片?

简单来说,使用 PNG 格式比起 GIF 来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多。目前,最新的浏览器基本上都支持PNG格式。唯独有万恶的 IE6 不支持 PNG 背景透明,在 IE6 中的 PNG 背景图会显示一个灰色的背景。

IE6 中 PNG 背景图片透明的方法

其实方法有很多,但网络上提供的方法也有诸多缺陷。比如不支持 css 中 backgrond-position 与 background-repeat 等,所以园子推荐你使用 DD_belatedPNG,方法如下:

1.首先下载 DD_belatedPNG.js 文件,本文下方有提供下载,将此文件放置到你的网站中的 js 目录下。

2.在你使用了 PNG 背景的页面头部嵌入以下代码,一般是加在 head 区域。

1
2
3
4
5
6
7
8
<!--[if IE 6]>   
<script src="js/DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>   
<script type="text/javascript">     
 /* EXAMPLE */   
 DD_belatedPNG.fix('.png_bg');   
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/   
</script> 
<![endif]-->

需要注意的一些问题:

1.如果你放置的 DD_belatedPNG.js 路径不同的话,也需要更改上述代码中的路径。

2.以上代码中的

1
DD_belatedPNG.fix('.png_bg');

括号中的 .png_bg 改成你在 CSS 定义了 PNG 背景图片的选择器,多个选择器请用英文逗号隔开,如下行代码所示:

1
DD_belatedPNG.fix('.png_bg1, .png_bg2');

3.有些朋友可能需要用到透明的 PNG 图片做为鼠标经过时的背景图片,这就需要用到 a:hover 属性,在这种情况下就需要以“a:hover”来做选择器了,你可以参考下面代码的写法:

1
2
3
4
5
6
<!--[if IE 6]>   
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>   
<script type="text/javascript">
DD_belatedPNG.fix('.trans,.box a:hover');   
</script>   
<![endif]-->

通过以上两步就实现了 IE6 中 PNG 背景图片透明的效果,在使用过程中有什么问题给我留言哈。

写在最后:我个人一直认为 IE6 早就该死了,在以前的文章中也声讨过,可是当我看到访问统计后台数据时,我真的很疑惑,IE6 真的该死了吗?在我的站点统计中使用 IE6 的使用率还保持着24% 左右的占有率。如果真的放弃了,那意味着会对这些喜欢古董的用户带来不好的体验。所以,园子认为,还是花些时间去专门为 IE6 去折腾下吧。

IE6中 PNG 背景透明所用到的素材下载

相关下载(161K) 百度网盘 | 华为网盘 | 示例文件下载(包含DD_belatedPNG.js文件和IE6中 PNG 背景透明示例)

  1. 逸山
    7月 8th, 201218:29

    费那事干吗,用gif不就完了

  2. 無塵
    8月 31st, 201119:03

    非常需要

  3. John
    4月 25th, 201117:39

    这个很不错啊。可是,园子,我怎么弄都不成啊?也是放在js路径下的。只需要修改header.php文件就可以吗?请指教。

    • 园子
      4月 26th, 201110:05

      @John
      提供有示例文件下载的
      你可以看下哈,就那几个地方改下就可以了。

  4. Zeric
    11月 14th, 201002:16

    这个不错,得好好去看看样式表有多少用到了透明png的。=。=

  5. 记忆盒子
    10月 26th, 201012:23

    是的,是的,我做的透明底的PNG图片,在IE6里看到不是透明的,因此我总要把PNG的背景改为与网页背景颜色一样。

  6. 风中的峰
    10月 25th, 201022:07

    对WP的代码,还是不怎么懂!

  7. 问学堂右脑王
    10月 25th, 201011:13

    嗯,学习了,感谢分享!

  8. su
    10月 25th, 201010:27

    还没更新啊 那就点广告了啊

  9. 赫赛汀
    10月 25th, 201009:08

    刚刚从IE6升级到IE8,以后再也不要忍受它的折磨了

  10. 恒安重工
    10月 25th, 201008:57

    额,很久没用过IE6了,不过还是支持你下哈。

  11. huangjun
    10月 24th, 201022:19

    哦,png可以做到渐变透明啊~

  12. su
    10月 24th, 201016:54

    呵呵老早不用IEl厄啊

  13. 小杰
    10月 24th, 201015:24

    没事过来支持帮顶~~~ 😛

  14. 学夫子
    10月 24th, 201015:07

    我文章里的公式图片就只能存成png格式

  15. 逝魂
    10月 24th, 201012:30

    我用的另一种方法,貌似简单,一般就logo用png的其他的地方不怎么影响

  16. 万戈
    10月 24th, 201009:07

    恩,我也觉得这是一个最加的解决方法了

  17. 七叶草
    10月 23rd, 201023:40

    很久没来了,今天过来看看

  18. zwwooooo
    10月 23rd, 201023:30

    不鸟ie6了

  19. armgod
    10月 23rd, 201023:11

    IE6 这个残废浏览器,早该死了,可是在中国还大行其道,悲剧啊

  20. 创享·生活
    10月 23rd, 201021:47

    IE6就是蛋痛噢。这样加载多一个js 比不兼容好。不过我不是太喜欢在网站上加载太多的js

  21. shekck
    10月 23rd, 201021:11

    我对万恶的ie6已经无语了,所以基本上都不敢用png图,所以用了纯黑背景…

  22. 小杰
    10月 23rd, 201019:56

    不错的方法,支持了~~

  23. tal-rasha
    10月 23rd, 201019:18

    以前遇到过这个问题,也知道这个解决方案,不过最后解决的办法是:不考虑ie6,哈哈

  24. 花脸猴
    10月 23rd, 201017:21

    该方案很有价值,用IE6的人还是主流

  25. 花脸猴
    10月 23rd, 201017:21

    该方案很有价值,用IE6的人还是主题

  26. 有点蓝
    10月 23rd, 201017:14

    还是不要支持IE6了,让它安静的去吧……

  27. 51TV免费电影
    10月 23rd, 201017:06

    来过让我们一起发展!留个脚印!

  28. 珊珊
    10月 23rd, 201016:31

    ie6,恨死你了。应该成为历史的尘埃····

  29. 软件盒子
    10月 23rd, 201015:46

    怎么没有图片展示

  30. 自由人
    10月 23rd, 201014:19

    是个不错的方法呢~~

  31. ixwebhosting中文
    10月 23rd, 201013:49

    你说的这个方法还是不错的,值得一用。。。

  32. reizhi
    10月 23rd, 201013:39

    还好,基本没有这个问题

  33. SOHO一族
    10月 23rd, 201012:49

    不懂代码,还是看不明白,睁眼瞎啊

  34. SOHO一族
    10月 23rd, 201012:48

    我上次用的一个皮肤就存在这个问题,在IE下很难看,后来还是放弃了:(

您必须在 登录 后才能发布评论.