位置:海鸟网 > IT > JavaScript >

用Javascript解决PNG图像显示的问题

我们在《IE6中PNG图像不透明是什么问题》中介绍了IE6中png图像显示不正常的现象,在本篇文章中,讲讲怎么修正IE6的这个bug。

 

在跨浏览器浏览网页时出现的问题,通常可以利用CSS hack技术完成,但png图像的bug已经超出了版面内的问题范围,不能用它解决。

但是,通过Javascript解决此类问题是另一个有效途径。

png图像不透明的现象也可以使用脚本来解决,而且已经有不少现成的文件可以直接使用了。

在这里我推荐使用IE PNG Alpha Fix v2.0,作者是Angus Turnbull。在百度中搜索IE PNG Alpha Fix v2.0即可找到,在他的主页找到iepngfix.zip文件,下载到自己的电脑上。

压缩包解压后可以看到11个文件。iepngfix.html文件是使用说明和示例。而真正能修正png图像显示bug的只有iepngfix_tilebg.、iepngfix.htc、blank.gif和iepngfix.php几个文件。在学会使用后,其它文件都可以删除了。

这个js工具可以将修复使用<img src=''>方法插入到页面中的图像,也可以修复作为背景插入到网页中的png图像。

下面讲解一下这个js工具的使用方法:

1、将iepngfix.htc和blank.gif两个文件拷到网页目录下;

2、在网页的CSS内容中加入:

img, div { behavior: url(iepngfix.htc) }
如果是在Html中加入这段代码,则插入:

<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
这里使用的CSS标签是您需要它支持png图像的标签,比如这里使用了img和div,那么在使用img和div时出现的png图像就会得到修正效果。如需要扩大它的作用范围:

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

3、如果你使用了二级目录,并将blank.gif图片放在了它下面,必须修改iepngfix.htc文件,具体方法是:打开htc文件,找到IEPNGFix.blankImg这行,修改blank.gif的目录。

4、为了让它支持CSS1中的background-repeat 和background-position,你还要确保网页链接了js文件插件,所以要在网页的<head></head>加入一句:

<script type="text/javascript" src="iepngfix_tilebg.js"></script>
完成以上四步操作,png图像就可以在ie6中正常使用了。