IE6显示png透明背景、图片的方法

PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明，会显示一个灰色的框。解决的办法也是有多种，在这里列出常用的其中一种：

IE6显示透明PNG背景：

使用css滤镜。

CSS Code复制内容到剪贴板

1.  background-image:none，filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="/images/bg.png

例如：

CSS Code复制内容到剪贴板

1.    .main{background:url(../images/bg.png)no-repeat; width:960px; _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="/images/bg.png");}

值得注意的是，此时div会被遮盖，该div下面的链接将不可点击，可以在main下面的div加上position:relative就可以了。

IE6显示透明PNG图片：

在网页的头部head之间加入下面的javascript代码：

JavaScript Code复制内容到剪贴板

1.  <!--[if IE 6]>

2.  <script language="javascript">

3.  function correctPNG()

4.  {

5.  for(var i=0; i<document.images.length; i++)

6.  {

7.  var img = document.images[i]

8.  var imgName = img.src.toUpperCase()

9.  if (imgName.substring(imgName.length-3,imgName.length) =="PNG")

10. {

11. var imgID = (img.id) ?"id='" + img.id +"' " : ""

12. var imgClass = (img.className) ?"class='" + img.className +"' " : ""

13. var imgTitle = (img.title) ?"title='" + img.title +"' " : "title='" + img.alt +"' "

14. var imgStyle ="display:inline-block;" + img.style.cssText

15. if (img.align =="left") imgStyle ="float:left;" + imgStyle

16. if (img.align =="right") imgStyle ="float:right;" + imgStyle

17. if (img.parentElement.href) imgStyle ="cursor:hand;" + imgStyle

18. var strNewHTML ="<span " + imgID + imgClass + imgTitle

19. +" style=\"" + "width:" + img.width + "px; height:" + img.height +"px;" + imgStyle +";"

20. +"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

21. +"(src=\'" + img.src +"\',sizingMethod='scale');\"></span>"

22. img.outerHTML = strNewHTML

23. i = i-1

24. }

25. }

26. }

27. window.attachEvent("onload", correctPNG);

28. </script>

29. <![endif]-->​