IE6下，png透明最好的解决方案

2009年09月30日作者： Artcss 类别：个人随笔

分享到: 百度 QQ空间微博豆瓣人人开心 QQ书签

透明png（准确的说是png-24）图片在网页上的应用，可以做出各种特效，使网页变得更加漂亮!

现在大部分浏览器都支持png透明，要命的IE6，却不支持！怎么办呢？从网上一搜，IE6下的png透明的解决方法有好多，自己以前也试过好多方法，有的只能背景透明，有的只能图片透明，而且背景透明的必须要给需要透明的图片指定宽和高，不能背景平铺，也就不能使用background-position属性，这使用起来就很不方便。

最后，我找到了一种方法，上边的那些问题都能解决，而且使用起来也非常方便，所以极力推进给大家。

这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.

这种方法就是借助DD_belatedPNG，它不仅支持backgrond-position与background-repeat.同时还支持focus和a:hover属性,以及img的透明

使用方法

1.在这里下载DD_belatedPNG.js文件.

2.在网页中引用,如下:

Download script.js

<!--[if lte IE 6]>
<script type="text/javascript" src="http://www.artcss.com/js/dd_belatedpng.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('.png_bg,img');
  /* 将 .png_bg 改成你应用了透明PNG的CSS选择器*/
</script>
<![endif]-->
/*页面中这样写：*/
<img src="xxx.png" />
<div class="png_bg"></div>

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.

官方地址:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

请看下边实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="artskin@163.com,guliqiang" /> <meta name="Keywords" content="前端思考" /> <meta content="all" name="robots" /> <title>IE6下，png透明最好的解决方案 || 前端思考</title>  <style>  </style> </head> <body> <h1>需要刷新一下才可以！</h1> <div class="main"> <div class="title"></div> <ul> <li>单反相机</li> <li>定焦相机</li> <li>变焦相机</li> <li>普通光学取景</li> <li>多重测光模式</li> </ul> <div class="author"><img src="/wp-content/uploads/test/img/author.png" alt="摄影师" /></div> <p>png的a:hover,|<a href="#">放上来试试！</a></p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

经典应用实例：

http://www.hxsd.com/news/zhuantipindao/090917sheying/

IE6下，png透明最好的解决方案

官方地址:

请看下边实例

经典应用实例：

相关博文

相关日志

Comments

给作者留言：

关于

RSS订阅前端思考

最新动态

友情链接

IE6下，png透明最好的解决方案

官方地址:

请看下边实例

经典应用实例：

相关博文

相关日志

Comments

给作者留言：

关于

RSS订阅前端思考

最新动态

常用标签

友情链接