解决IE6下PNG透明问题 | Heluyao's Blog

博客 - html/css/xml/xsl

解决IE6下PNG透明问题

　　昨晚帮一朋友制作一个页面，看似很简单！却花了我4个小时。主要是花在页面里3张png的图片上，似了好几种方法，弄来弄去的，头都大了！今天来整理一下，方法都来自互联网，算是做个笔录吧！

一.IE6使用gif，其他则使用png

.pngImg { background:url(image.png); _background:url(image.gif);}

　　对于页面来说，该方法是最为完美的，缺陷即gif图像的效果问题。该方法用到的时候很少，依图片而定。但是gif是不能做到半透明的！

二.DD_belatedPNG

　　这个可能是时下最佳解决IE6下PNG问题的办法了，它使用的是微软的VML语言进行绘制，而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜，所以DD_belatedPNG在性能上更具优势，更安全，更稳定。下面介绍下使用方法。

　　先在页面引入DD_belatedPNG.js 压缩后的文件，再调用其方法。

<!–[if IE 6]>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
DD_belatedPNG.fix('CSS选择器, 应用类型');
</script>
<![endif]–>

该方法出自：http://dillerdesign.com/experiment/DD_belatedPNG/，详细了解请猛击过去查看相关文档。

三.让“块”透明的方法

.div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}

第一种方法，只适用于全透明的图片效果。第二种，比较好用的真正处理IE6下PNG24的方法。第三种，不是处理PNG的，偶只是顺带做个笔记而已~

相关文章

标签：兼容，透明png

这篇文章发表于2009年04月11日，下午，5:50，归类于html/css/xml/xsl。您可以通过订阅RSS 2.0跟踪对这篇文章的评论，也可以发表您的评论，或者从您的站点trackback。

6 条评论发表在“解决IE6下PNG透明问题”上

housne 2009年04月21日下午 10:44 说：
狠IE6,还好IE7和8都支持 PNG 透明图片，不过IE6在中国好像还有很长的路要走，靠

[回复]
heluyao 2009年04月22日下午 1:24 说：
IE6 估计也不久了，对它的恨已不是一天两天了！呵呵

[回复]
PNG在IE6下的透明 2009年06月18日下午 1:54 说：
[...] 既然大家都写过解决办法，我就不写了，如果您感兴趣可以访问这里查看。同时您也可以使用8位的PNG图，不过不建议这样做，会导致图片有较多毛边。以下说说我在调用以下js过程中出现的问题和解决方法。 [...]
晴天小猪 2010年03月26日下午 2:37 说：
非常感谢找了好多解决方案就你的可以呕谢谢太感谢了

[回复]
苏州大学 2010年08月26日下午 12:35 说：
额，不错，但是我为什么看到有些PNG在IE6下面就没有失效呢?是有什么特别的原因么？

[回复]
heluyao 2010年08月27日下午 6:45 说：
你说的是png8，png8图片IE6是支持透明的。

[回复]

写下您的看法