让png格式图片在网页中透明显示,让IE8支持半透明效果滤镜

把这段代码插入head里面。。

[javascript]  view plain copy

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

或者：

把这个插入需要的页面里：

[html]  view plain copy

1. <!--[if lt IE 7]>  
2. <script defer type="text/javascript" src="png.js"></script>  
3. <![endif]-->  

以下存为：png.js 调用

 

[html]  view plain copy

1. var arVersion = navigator.appVersion.split("MSIE")  
2. var version = parseFloat(arVersion[1])  
3. if ((version >= 5.5) && (document.body.filters))  
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');\">"  
22. img.outerHTML = strNewHTML  
23. i = i-1  
24. }  
25. }  
26. }  
27. </document>  

这两种方法都能解决png图片在网页中透明部分变灰色的问题～～

补充一下：上面方法只能针对 <img src=""> 这样插入页面中的图片。对于应用在背景中的png格式图片不能起到作用。这时候，你需要在css中针对背景图片插入这样的代码：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=绝对路径,);

这段代码也是从网上发掘来的，发现很实用，把原文说明贴在下面：

AlphaImageLoader兼容性：IE5.5+

語法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

屬性：
enabled   : 可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。true | false true   : 默認值。濾鏡激活。 
false   : 濾鏡被禁止。 

sizingMethod   : 可選項。字符串(String)。設置或檢索濾鏡作用的對象的圖片在對像容器邊界內的顯示方式。 crop   : 剪切圖片以適應對像尺寸。
image   : 默認值。增大或減小對象的尺寸邊界以適應圖片的尺寸。 
scale   : 縮放圖片以適應對象的尺寸邊界。 

src   : 必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會作用。

特性：
Enabled   : 可讀寫。布爾值(Boolean)。參閱 enabled 屬性。 
sizingMethod   : 可讀寫。字符串(String)。參閱 sizingMethod 屬性。 
src   : 可讀寫。字符串(String)。參閱 src 屬性。

 

解决IE8不支持透明滤镜：

这样写　filter:alpha(opacity=50)，现在IE8不支持了。

这种写法还不知道解决什么的　-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=50)”;

IE7、IE8里可以这样写　filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

FireFoX里可以这样写：opacity:0.5