IE6下PNG图片背景半透明问题比较通用的3种解决方法

方法一:有PNG图片的页面调用一个unitpngfix.js文件实现PNG半透明

这个文件是从国外一位牛人的博客上找到的,支持大部的png图片和背景,支持repeat,但是对有背景定位的情况下支持不太好,图片上的超链接会失效,会默认为位置为0。

点此下载 unitpngfix.js 
作者官方网站下载

使用方法:页面加载js就可以了,把clear.gif放在与js同一目录。
<script type="text/javascript" src="unitpngfix.js"></script>

方法二:使用css的behavior方式(iepngfix.htc实现png半透明)

这种方法算是对以上方法的补充,第一种方法在某些有postion定位的情况下,会失效,此时可同时加这种方法,

点此下载 iepngfix
作者官方网站下载

使用方法:

1. 把 iepngfix.htc 和 blank.gif 复制到网站相应的目录下
iepngfix.htc 放置目录不限,blank.gif 默认放在网站根目录下,你也可自行修改iepngfix.htc 里的图片路径,注意,这是相对html文档的路径,不是相对于iepngfix.htc的路径,因此建议使用绝对路径,如 /image/blank.gif
2. 然后要在页面的头部信息中调用 iepngfix.htc 文件,像这样:

<style type="text/css">
img, div, span{behavior:url(iepngfix.htc);}
</style>

这里的 img 和 div 是你想要应用透明效果的元素,同样,你可以这样写:

<style type="text/css">
img, div, a, input{behavior:url(iepngfix.htc);}
</style>

3 如果想使用背景平铺和定位的效果,以前的步骤做完之后,我们还要再引用 iepngfix_tilebg.js 这个js,才能使png图片在ie6中平铺时实现透明效果,像下面这样:

<script type="text/javascript" src="iepngfix_tilebg.js"></script>

注:可以使用if条件注释语句,使这些文件只在ie6激活,以便在其他浏览器下加快加载速度。

<!--[if lte IE 6]>
<style type="text/css">
img, div{behavior:url(iepngfix.htc);}
</style>
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
<![endif]-->

IE条件注释方式
<!--[if IE]>这是Internet Explorer<![endif]-->
<!--[if IE 5]>这是Internet Explorer 5<![endif]-->
<!--[if IE 7]>这是Internet Explorer 7<![endif]-->
<!--[if gte IE 5]>这是Internet Explorer 5 或者更高<![endif]-->
<!--[if lt IE 6]>这是版小于6的Internet Explorer<![endif]-->
<!--[if lte IE 5.5]>这是Internet Explorer 5.5或更低<![endif]-->
 

注意两个特殊的语法:
gt: 大于
lte: 小于或等于
!IE 感叹号的使用

方法三:滤镜透明法(适合使用PNG图片较少的情况下)

在使用了png的类当中,加入filter过滤。
写法如:
/*加星号只在 ie 6.0 中被识别*/
* html #wrap {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/bgcanvas.png");
background:none;
}
#wrap a{position:relative;}/*使用position属性解决IE6下链接失效的问题*/

值得注意的是,图片路径尽量使用绝对路径,某些情况下,相对路径无法正确过滤。

以上便是我们常用的几种PNG在IE6中半透明的方法。