IE6中png图片透明方法

一、png图片写在css中作为背景图（IE5.5+ 的 AlphaImageLoader 滤镜功能）

1. <style> 
2. .png{ 
3.     border:1px solid #360; 
4.     width:905px; 
5.     height:545px; 
6.     background: url(yun.png) no-repeat; 
7.     _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="yun.png"); 
8.     _background:none; 
9. } 
10. </style> 
11.  
12. <div class="png"></div> 

二、png图片写在html中作为插入图（一般使用js实现）

方法一:

1. <!--[if IE 6]> 
2. <script> 
3. function correctPNG(){ 
4. for(var i=0; i<document.images.length; i++){ 
5. var img = document.images[i]; 
6. var imgimgName = img.src.toUpperCase(); 
7. if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){ 
8. var imgID = (img.id) ? "id='" + img.id + "' " : ""; 
9. var imgClass = (img.className) ? "class='" + img.className + "' " : ""; 
10. var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "; 
11. var imgStyle = "display:inline-block;" + img.style.cssText; 
12. if (img.align == "left") imgStyle = "float:left;" + imgStyle; 
13. if (img.align == "right") imgStyle = "float:right;" + imgStyle; 
14. if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle; 
15. var strNewHTML = "<span "+ imgID + imgClass + imgTitle + "style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
16. + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>"; 
17. img.outerHTML = strNewHTML; 
18. ii = i-1; 
19. } 
20. } 
21. } 
22. window.attachEvent("onload", correctPNG); 
23. </script> 
24. <![endif]--> 
25.  
26. <img src="yun.png" border="0" /> 

方法二：（注：需要在图片处调用js）

1. <script language="javascript"> 
2. // 修复 IE 下 PNG 图片不能透明显示的问题 
3. function fixPNG(myImage) { 
4. var arVersion = navigator.appVersion.split("MSIE"); 
5. var version = parseFloat(arVersion[1]); 
6. if ((version >= 5.5) && (version < 7) && (document.body.filters)){ 
7.      var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""; 
8.      var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""; 
9.      var imgTitle = (myImage.title) ? "title='" + myImage.title   + "' " : "title='" + myImage.alt + "' "; 
10.      var imgStyle = "display:inline-block;" + myImage.style.cssText; 
11.      var strNewHTML = "<span " + imgID + imgClass + imgTitle 
12.    + " style=\"" + "width:" + myImage.width 
13.    + "px; height:" + myImage.height 
14.    + "px;" + imgStyle + ";" 
15.    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
16.    + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"; 
17.      myImage.outerHTML = strNewHTML; 
18. } } 
19. window.onload=function(){ 
20.          document.getElementById("top").style.height=screen.height/5+"px"; 
21.          
22. } 
23. </script> 
24. <img src="logo.png" border="0" onload="fixPNG(this)" /> 

      本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/964942，如需转载请自行联系原作者