讓IE6顯示透明PNG背景圖檔

核心代碼CSS：

1. {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 位址指定背景圖像。假如忽略此參數，濾鏡将不會作用。

已知問題：

濾鏡會使圖檔覆寫在文本層之上，使超連結和按鈕等失效。并沒有設定為背景的選項。

尚不完美的解決方法：

将div、連結或按鈕設定相對位置，使之浮動。

1.此法文字仍會顯示為在半透明下的模糊效果。

2.div/label/gridview等長度的變化将不會引起容器長度的自動适應。

摘幾段代碼和方法：

把下面的代碼放在head區就可以解決問題了。

<!--[if gte IE 5.5000]><script type="text/javascript" src="js/pngfix.js"></script><![endif]-->

pngfix.js檔案的程式代碼

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

另一個官方解決方案的核心函數

1. function fixPng() { 
2.   var arVersion = navigator.appVersion.split("MSIE") 
3.   var version = parseFloat(arVersion[1]) 
4.   if ((version >= 5.5 && version < 7.0) && (document.body.filters)) { 
5.     for(var i=0; i<document.images.length;></document.images.length;>      var img = document.images[i]; 
6.       var imgName = img.src.toUpperCase(); 
7.       if (imgName.indexOf(".PNG") > 0) { 
8.         var width = img.width; 
9.         var height = img.height; 
10.         var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image"; 
11.         img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')"; 
12.         img.src="images/blank.gif" mce_src="images/blank.gif"; 
13.         img.width = width; 
14.         img.height = height; 
15.         } 
16.       } 
17.     } 
18.   } 

辨識浏覽器功能

Firefox、Opera等完全支援PNG透明圖檔的浏覽器也支援子選擇器（>），而IE不識别（包括IE7），所有我們可以通過這來定義Firefox、Opera等浏覽器中PNG圖檔的樣式。如下

html>body #png {background: url(images/bg.png) repeat;}

而對于IE，我們都通過濾鏡的方法來定義，或許有人問，IE7不是支援PNG透明圖檔嗎？是的，不錯，IE7是支援PNG透明圖檔，但IE7也支援AlphaImageLoader濾鏡，為了避免使用PNG圖檔和濾鏡沖突造成的不便，我們統一在IE中使用AlphaImageLoader濾鏡。我們通過隻有IE才識别的通配符（*），來定義IE浏覽器中的濾鏡。如下：

1. * html #png {
2. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg.png");
3. background:none;
4. }

這樣綜合起來的決絕方法就是：

1. html>body #png {background: url(images/bg.png) repeat;}
2. html #png {
3. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg.png");
4. background:none;
5. }

此外，還可以參考參考

http://dean.edwards.name/IE7/

http://code.google.com/p/ie7-js/

http://dean.edwards.name/weblog/2008/01/ie7-2/

代碼原理都是濾鏡,都無法正确處理背景.