博客 - 标签：透明png

解决IE6下PNG透明问题

2009-04-11 下午 - html/css/xml/xsl - -

　　昨晚帮一朋友制作一个页面，看似很简单！却花了我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的，偶只是顺带做个笔记而已~

6 Comments »