方案1 - 濾鏡解決方案：

介紹： 濾鏡從IE4.0被微軟正式引入，所以我們可以使用濾鏡解決IE6的PNG透明問題，濾鏡不僅可以實現目前CSS3的一些旋轉效果而且還可以引入圖片。 注意：此方法在部分版本的IETest中無效，建議使用標準的IE6來進行測試！


目錄說明：
?


思路：
? ?? ???1、書寫正常的CSS代碼，通過background導入圖片，這樣所有的瀏覽器均使用了此PNG圖片；
? ?? ?? ?? ??? background:url( ../images/W3CfunsLogo.png );


? ?? ???2、通過濾鏡對引入圖片，濾鏡引入圖片的時候是 相對于HTML文件，而不是相對于CSS文件 ，語法如下：
? ?? ?? ?? ??? filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" images/W3CfunsLogo.png ");

? ?? ?? ?? ???代碼寫到這里，我們放到IE6下測試后發現IE6還是沒有透明，因為我們雖然設置了濾鏡引入圖片，但是background也同樣加載了此圖片，又因為background的圖層比濾鏡設置的高，所以才沒有顯示出來，如下圖：

?

? ?? ???3、所以我們得出的結論就是當我們使用filter的時候，就要使background失效，因此我們可以使用 CSSHack 來解決此問題（如果您不知道IE6的 CSSHack 如何使用的話，請看 這里！ ），只需要將IE6的 background:none; 即可，那么可以得出的代碼如下：
? ?? ?? ?? ?? _background:none;? /*此代碼只有IE6識別*/

? ?? ?? ?? ? 又因為filter只在IE6下讓其產生作用，IE6+版本的瀏覽器雖然也識別filter，但是png透明是沒有灰底問題的，所以我們同樣將filter也加上IE6 Hack即可。


? ?? ???4、最終我們可以得到如下代碼：
? ?? ?? ?? ??? #pics
? ?? ?? ?? ???{
? ?? ?? ?? ?? ?? ?? ? background :url(../images/W3CfunsLogo.png) no-repeat;

? ?? ?? ?? ?? ?? ?? ?? /*以下為IE6設置PNG透明代碼*/
? ?? ?? ?? ?? ?? ?? ? _background :none;
? ?? ?? ?? ?? ?? ?? ? _filter:progid :DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");
? ?? ?? ?? ???}


? ?? ??? 提示： 如果需要使其支持鏈接的hover，那么需要在CSS中定義： cursor:pointer; 使其呈現手型，否則將為默認的鼠標狀態。


優點：
? ?? ???1、綠色無插件；
? ?? ???2、效率高，速度快；
? ?? ???3、網速慢的時候，不會出現先灰底再透明的情況，支持遠程圖片；
? ?? ???4、支持Hover等偽類，但是得使用兩張圖片，網速慢的情況下，會導致第二張圖片暫時無法顯示，因為還沒有完全載入；


缺點：
? ?? ???1、不支持平鋪，雖然filter有 sizingMethod="scale",? 拉伸縮放模式，但是圖片會變形，如果單純的顏色或簡單的漸變色還能橫向平鋪；
? ?? ???2、不支持Img標簽；
? ?? ???3、不支持CSS Sprite；


使用情況：
? ?? ???1、當沒有img引入png時可考慮；
? ?? ???2、當沒有CSS Sprite需求時可考慮；
? ?? ???3、當沒有平鋪需求時候可考慮；



濾鏡解決方案 - DEMO入口

---

方案2 - HTC插件解決方案：

介紹： 從IE 5.5版本開始，Internet Explorer（IE）開始支持Web 行為的概念。這些行為是由后綴名為.htc的腳本文件描述的，它們定義了一套方法和屬性，程序員幾乎可以把這些方法和屬性應用到HTML頁面上的任何元素上去。


目錄說明：
?


思路：
? ?? ???1、首先下載壓縮文件? ? htc.zip ? (2.27 KB, 下載次數: 117)?
? ?? ???2、復制并粘貼iepngfix.htc和blank.gif到您的網站文件夾中。
? ?? ???3、在需要使用的PNG標簽上定義如下， 相對于HTML文件的位置 （不相對于CSS文件！） 。例如，你可能看起來像這樣：
? ?? ?? ?? ??? <style type="text/css">
? ?? ?? ?? ?? ?? ?? ? ?img,div{behavior:url(style/iepngfix.htc);}
? ?? ?? ?? ??? </style>

? ?? ???5、如果您的網站使用的子文件夾，打開。HTC文件，大約在第16行更改blankImg變量，修改blank.gif路徑像這樣： 同樣路徑相對于HTML文件的位置 （不相對于CSS文件！）。
? ?? ?? ?? ?? IEPNGFix.blankImg = "images/blank.gif";

? ?? ???6、復制并粘貼iepngfix.htc和blank.gif到您的網站文件夾中。
? ?? ??? <script type="text/javascript" src="js/iepngfix_tilebg.js"></script>

? ?? ???7、由于此js只有使用IE6時才有用，所以為了讓我們的頁面更加高效的執行，我們可以將上方代碼修改如下，只有IE6的時候才調用執行此JavaScript：
? ?? ??? <!--[if IE 6]> <script type="text/javascript" src="../js/iepngfix_tilebg.js"></script> <![endif]-->


優點：
? ?? ???1、一次性配置好，只需要像平時一樣引入png圖片，也不需要考慮png相對于html路徑的問題，當目錄有所變化，只需要修改htc文件或css中htc文件路徑即可。
? ?? ???2、支持平鋪屬性。
? ?? ???3、不支持Img標簽；
? ?? ???4、不支持Hover等偽類；


缺點：
? ?? ???1、多引入了js、圖片和htc，共三個文件；
? ?? ???2、不支持CSS Sprite；
? ?? ???3、當文件載入之前，會先暫時呈現灰底；


使用情況：
? ?? ???1、當沒有img引入png時可考慮；
? ?? ???2、當沒有CSS Sprite需求時可考慮；
? ?? ???3、PNG圖片比較頻繁修改時可考慮；


htc解決方案 - DEMO入口

---

方案3 - 純CSS解決方案：

介紹： 雖說是純CSS解決方案，但是也使用了JavaScript來運算，只不過是將腳本寫到了CSS文件中，遺憾的是，此方案只支持img標簽，對背景圖片無效。


目錄說明：
?


思路：
? ?? ???1、首先下載透明的圖片文件? ? blank.zip ? (707 Bytes, 下載次數: 114)?
? ?? ???2、在需要設置透明的樣式中加入下方代碼，其中藍色標注代碼為剛才下載的透明圖片，路徑同樣還是 相對于HTML文件的位置 （不相對于CSS文件！） ：
? ?? ?? ?? ???img
? ?? ?? ?? ???{
? ?? ?? ?? ?? ?? ?? ? _azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "images/blank.gif" ):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
? ?? ?? ?? ???}


優點：
? ?? ???CSS代碼看起來 似乎 很優雅，至少沒有亂七八糟的文件了，基本沒有外加的文件，效率還算不錯。


缺點：
? ?? ???1、多引入了一個本不應該存在的blank.gif圖片文件；
? ?? ???2、不支持背景圖即Background；
? ?? ???3、當文件載入之前，會先暫時呈現灰底；
? ?? ???4、不支持Hover等偽類；


使用情況：
? ?? ???1、大部分透明的png存在于img標簽中時可考慮；
? ?? ???2、如果有背景圖的可以參考上面所說的支持背景圖的兩種方式；


純css解決方案 - DEMO入口

---

方案4 - 原生JavaScript解決方案：

介紹： 利用了方案1的濾鏡原理來實現，但由于此javascript沒有讀取css文件中的樣式，所以此方案同樣只支持img標簽，對背景圖片無效。


目錄說明：
?


思路：
? ?? ???1、首先下載透明此方案所用到的js文件? ? iepngfix.zip ? (1.25 KB, 下載次數: 148)?
? ?? ???2、由于此js只有使用IE6時才有用，所以為了讓我們的頁面更加高效的執行，我們可以將上方代碼修改如下，只有IE6的時候才調用執行此JavaScript：
? ?? ??? <!--[if IE 6]> <script type="text/javascript" src="js/iepngfix.js"></script> <![endif]-->


優點：
? ?? ???代碼看起來 似乎 很優雅，基本沒有外加的文件，效率還算不錯。


缺點：
? ?? ???1、額外加入了js文件，增加http請求；
? ?? ???2、不支持背景圖即Background；
? ?? ???3、當文件載入之前，會先暫時呈現灰底；
? ?? ???4、不支持Hover等偽類；


使用情況：
? ?? ???1、大部分透明的png存在于img標簽中時可考慮；
? ?? ???2、如果有背景圖的可以參考上面所說的支持背景圖的兩種方式；


原生JavaScript解決方案 - DEMO入口

---

方案5 - jQuery解決方案：

介紹： jQuery為我們帶來了很大的方便，jQuery沒有讓我們有太大的失望，img和png都同時得以支持，唯一美中不足的還是無法平鋪，無法使用CSS Sprite。


目錄說明：
?


思路：
? ?? ???1、首先下載此方案所用到的js文件和透明gif? ? jQueryPngFix.zip ? (2.7 KB, 下載次數: 158)?
? ?? ???2、找到js文件中找到 blankgif: 'images/blank.gif' ，將路徑修改為 相對于HTML文件的位置 （不相對于CSS或js文件！）
? ?? ???3、由于此js只有使用IE6時才有用，所以為了讓我們的頁面更加高效的執行，我們可以將上方代碼修改如下，只有IE6的時候才調用執行此JavaScript：
? ?? ??? <!--[if IE 6]> <script type="text/javascript" src="js/pngfix.js"></script> <![endif]-->


優點：
? ?? ???1、CSS代碼看起來很優雅，只需要引入js進行簡單的配置一下就行了，效率還算不錯；
? ?? ???2、支持背景圖，支持img；


缺點：
? ?? ???1、額外加入了js文件和圖片文件，增加http請求；
? ?? ???2、加載了一個龐大的jQuery類庫；
? ?? ???3、多庫共存的時候可能會出現問題；
? ?? ???4、不支持平鋪；
? ?? ???5、不支持CSS Sprite；
? ?? ???6、當文件載入之前，會先暫時呈現灰底；
? ?? ???7、不支持Hover等偽類；


使用情況：
? ?? ???當您的項目中使用jQuery的時可以考慮；


jQuery解決方案 - DEMO入口

---

方案6 - PNG8格式的圖片解決方案：

介紹： png8和gif都是8位的透明度，IE6與生俱來就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而對于非動畫的GIF建議你使用PNG8，因為體積會更小~

思路： 一個最簡單也最保險的方法讓IE6支持PNG圖片透明（小小的分享一下）

優缺點： 點擊此處前往

---

方案7 - DD_belatedPNG解決方案：

介紹： 我們都知道在目前所用的png圖片透明解決方案基本都是使用濾鏡、xpression解決的、透明gif替代。但是這些方法都有一個缺點,就是不支持CSS中backgrond-position與background-repeat。而這次的js插件使用了微軟的VML語言進行繪制且不需要引入其他文件，一個小小的js就可以完美解決png圖片bug就連img標簽和hover偽類也可以很好的解決。


目錄說明：
?


思路：
? ?? ???1、首先下載此方案所用到的文件，? ? DD_belatedPNG.zip ? (3.76 KB, 下載次數: 274)?
? ?? ???2、引入剛下載的js文件，同樣由于此js只有使用IE6時才有用，所以為了讓我們的頁面更加高效的執行，我們可以將上方代碼修改如下，只有IE6的時候才調用執行此JavaScript：
? ?? ??? <!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG.js"></script> <![endif]-->
? ?? ???3、調用函數，設置參數如下：
? ?? ?? ?? ??? DD_belatedPNG.fix(" #pngImg,#pics,#picsRepeat ");

? ?? ?? ?? ???其中傳入的參數為所使用png圖片的標簽的ID、類樣式和標簽名稱，同樣也可以按照下方這樣來寫
? ?? ?? ?? ??? DD_belatedPNG.fix(" #content img ");
? ?? ?? ?? ???此方法則表示#content下的所有img標簽透明

? ?? ?? ?? ???如果為鏈接和鏈接的hover設置透明，那么您按照下方這么來寫，在部分版本里面可以不用加入:hover直接寫選擇器即可，但是為了保險，建議咱們還是加上:hover：
? ?? ?? ?? ??? DD_belatedPNG.fix(" #links,#link:hover ");

? ?? ?? ?? ???寫到這里并且您使用過jQuery或者CSSQuery類庫，那么您一定熟悉上面的這種選擇方法，總之就是，在CSS中您是如何選擇的元素，那么在這個js函數（方法）中傳入什么，只不過多個選擇的時候，使用逗號隔開即可。


? ?? ??? KwooShung用此方法時的小技巧： 如果頁面中存在很多png， DD_belatedPNG.fix(); 函數的參數豈不是很長？我們可以使用這種寫法：
? ?? ?? ?? ?? DD_belatedPNG.fix(" .pngFix,.pngFix:hover ");

? ?? ?? ?? ? 如果使用上述的寫法，我們的html中只需要在相對應的標簽上加入 class="pngFix" 就行了，如果有多個類樣式，按照平時的多個類樣式的寫法即可 class="abc cbc pngFix" ，

? ?? ?? ?? ? 使用此方法的時候，我們每次都要加載兩個js文件或者寫兩個 <script> 標簽才行，這樣不太好，http請求會增多，那么我們可以打開DD_belatedPNG.js文件，在尾部加入如下代碼即可：
? ?? ?? ?? ?? window .onload =? function ()
? ?? ?? ?? ?? {
? ?? ?? ?? ?? ?? ?? ?? ???DD_belatedPNG.fix( ".pngFix,.pngFix:hover" );
? ?? ?? ?? ?? }

? ?? ?? ?? ? 這樣我們只需要引入此JS，在需要透明的標簽上加入 class="pngFix" 即可，簡單 · 方便 · 快捷！


優點：
? ?? ???1、CSS代碼無需任何修改，按照平時的思路來寫即可；
? ?? ???2、無需配置；
? ?? ???3、沒有多余的gif圖片；
? ?? ???4、支持img；
? ?? ???5、支持平鋪；
? ?? ???6、支持CSS Sprite；
? ?? ???8、支持Hover等偽類；


缺點：
? ?? ???1、額外加入了js文件（6.39k）和http請求，可以忽略不計；
? ?? ???2、當文件載入之前，會先暫時呈現灰底；
? ?? ???3、js文件過多的時候，可能會報錯，導致js無法正常運行（這種情況極少出現，可以忽略不計）；


使用情況：
? ?? ???1、當前6種方法均不能解決問題的時候可考慮；
? ?? ???2、當png圖片過多的時候可考慮，因為png圖片太多，使用前面的幾個方法，有的會導致CSS代碼冗余過多，還不如引入此文件劃算；


DD_belatedPNG解決方案 - DEMO入口

---

方案8 - EvPng解決方案：

介紹： 此方案與第七種方案差不多，使用方法也如出一轍，效果也非常不錯。

目錄說明：
?

思路：
? ?? ???1、首先下載此方案所用到的文件，? ? EvPng.zip ? (3.39 KB, 下載次數: 144)?
? ?? ???2、參考第七種方案的使用方法。


優點：
? ?? ???1、CSS代碼無需任何修改，按照平時的思路來寫即可；
? ?? ???2、無需配置；
? ?? ???3、沒有多余的gif圖片；
? ?? ???4、支持img；
? ?? ???5、支持平鋪；
? ?? ???6、支持CSS Sprite；
? ?? ???8、支持Hover等偽類；


缺點：
? ?? ???1、額外加入了js文件（文件4.93k，比DD_belatedPNG的6.39k還小）和http請求，可以忽略不計；
? ?? ???2、當文件載入之前，會先暫時呈現灰底；
? ?? ???3、js文件過多的時候，可能會報錯，導致js無法正常運行（這種情況極少出現，可以忽略不計）；
? ?? ???4、使用CSS Sprite技術的hover效果在部分情況下top可能會有1像素的偏差。


使用情況：
? ?? ???1、當前7種方法均不能解決問題的時候可考慮；
? ?? ???2、當DD_belatedPNG效果不理想的時候可以考慮；


方案提供者： 本帖 60 樓，感謝 moxuanyuan 童鞋的分享。


EvPng解決方案 - DEMO入口

ie6 png問題