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

àì夳堔傛蜴生んèń 2022-08-10 08:47 155阅读 0赞

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

**\[javascript\]**  [view plain][] [copy][view plain]

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][view plain]

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

以下存为：png.js 调用

**\[html\]**  [view plain][] [copy][view plain]

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

[view plain]: http://blog.csdn.net/shyy123/article/details/6860540#