css/js實現png圖片ie6下背景透明實現代碼

在IE6直接顯示（包括內容中直接插入、作為背景圖片）PNG-24格式的圖片，是不能正確顯示透明、半透明內容與其他內容的疊加呈現效果的。那些IE7+以及其他標準瀏覽器中漂亮的虛化、淡出、投影效果，在IE6-中很可能成了一坨難看的灰色。

　　如果你無法忍受ie6中難看的灰色，如果你無法放棄半透明疊加的效果，你會有機會遇到這個問題的。解決途徑有不少。這裡列舉一些，以供參考：

1，修改設計效果，使之可以整塊透明地區被切片而不影響顯示效果。或者去掉半透明效果。

2，htc檔案
　　這裡的htc，和宏達手機是無關的。目前它僅被IE5.5+支援。
 　　點擊這裡下載示範檔案。
　　此方案既適用於內容中直接插入圖片的情況，也適用於背景圖片的情況。在網上可以搜尋到更多的相關介紹，但非本文推薦的方法，不多細說。

3，Flash替換
　　意思就是，把需要用到半透明效果的地方，用flash來表現……是不是聽著就很頭疼？
　　只適用於直接插入圖片的情況。同樣，非本文推薦的方案，不多細說。

4，IE濾鏡
　　此方法適用於背景圖片的情況。直接插入圖片的情況亦可改為用背景圖片，從而採用此方法。
　　具體做法：
　　比如現在有一個容器，樣式名為.pngBox，在支援PNG-24的瀏覽器中，使用樣式定義：

代碼如下	複製代碼
.pngBox { .background: url("translucent.png") no-repeat 0 0; .}

　　在IE5.5/IE6中，就不需要這個背景圖了，而通過用濾鏡來載入圖片。即：

代碼如下	複製代碼
.pngBox { .filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='translucent.png',sizingMethod='scale'); }

　　值得注意的是，使用濾鏡時，圖片的src應該是相對網頁檔案的路徑，而非相對css檔案的路徑；或者使用絕對路徑。
　　綜上，考慮相容性的定義可為：
 

代碼如下	複製代碼
.pngBox { .background: url("translucent.png") no-repeat 0 0; ._filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='translucent.png',sizingMethod='scale'); ._background: none; }

　　AlphaImageLoader的用法的詳細介紹，請在網上搜尋。

5，JS替換法
　　此JS替換方法基於第4點中的IE濾鏡辦法，適用於一個頁面需要批量地加入透明png圖片。

　　為了插入一張圖片所用到的css定義就很多，而且還要去想圖片路徑的問題。如果是多張圖片，那定義背景的代碼就一大片了。這個JS可以只需要關注在哪使用png圖片，其他css代碼會自動構造

JS實現PNG圖片IE6下背景透明代碼收藏，直接拿去用吧，不多說什麼！！

代碼如下

複製代碼

function correctPNG()    {    for(var i=0; i<document.images.length; i++)       {      var img = document.images[i]      var imgName = img.src.toUpperCase()      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")         {        var imgID = (img.id) ? "id='" + img.id + "' " : ""        var imgClass = (img.className) ? "class='" + img.className + "' " : ""        var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "        var imgStyle = "display:inline-block;" + img.style.cssText        if (img.align == "left") imgStyle = "float:left;" + imgStyle        if (img.align == "right") imgStyle = "float:right;" + imgStyle        if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle           var strNewHTML = "<span " + imgID + imgClass + imgTitle        + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"        + "(src='" + img.src + "', sizingMethod='scale');"></span>"        img.outerHTML = strNewHTML        i = i-1         }       }    } function alphaBackgrounds(){    var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');    var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);    for (i=0; i<document.all.length; i++){       var bg = document.all[i].currentStyle.backgroundImage;       if (bg){          if (bg.match(/.png/i) != null){             var mypng = bg.substring(5,bg.length-2);    //alert(mypng);             document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='crop')";             document.all[i].style.backgroundImage = "url('')";    //alert(document.all[i].style.filter);          }                                                    }    } } if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) { window.attachEvent("onload", correctPNG); window.attachEvent("onload", alphaBackgrounds); }

現在只要調用本js在要實現透明的頁面，然後在頁面中加入png圖片就可以實現背景透明了。