方案1 - 濾鏡解決方案：

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


目錄說明：



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


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

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

?3、所以我們得出的結(jié)論就是當(dāng)我們使用filter的時候，就要使background失效，因此我們可以使用 CSSHack 來解決此問題，只需要將IE6的 background:none; 即可，那么可以得出的代碼如下：
? ?? ?? ?? ? _background:none; /*此代碼只有IE6識別*/

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


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

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


? ?? ??? 提示： 如果需要使其支持鏈接的hover，那么需要在CSS中定義： cursor:pointer; 使其呈現(xiàn)手型，否則將為默認(rèn)的鼠標(biāo)狀態(tài)。


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


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


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

---

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

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


目錄說明：



思路：
? ?? ???1、首先下載壓縮文件

htc.zip
? ?? ???2、復(fù)制并粘貼iepngfix.htc和blank.gif到您的網(wǎng)站文件夾中。
? ?? ???3、在需要使用的PNG標(biāo)簽上定義如下， 相對于HTML文件的位置 （不相對于CSS文件！） 。例如，你可能看起來像這樣：
? ?? ?? ?? ??? <style type="text/css">
? ?? ?? ?? ?? ?? ?? ? img,div{behavior:url(style/iepngfix.htc);}
? ?? ?? ?? ??? </style>

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

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

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


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


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


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

---

方案3 - 純CSS解決方案：

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


目錄說明：



思路：
? ?? ???1、首先下載透明的圖片文件 blank.zip ?
? ?? ???2、在需要設(shè)置透明的樣式中加入下方代碼，其中藍(lán)色標(biāo)注代碼為剛才下載的透明圖片，路徑同樣還是 相對于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);
? ?? ?? ?? ???}


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


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


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

---

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

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


目錄說明：



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


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


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


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

---

方案5 - jQuery解決方案：

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


目錄說明：



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


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


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


使用情況：
? ?? ???當(dāng)您的項目中使用jQuery的時可以考慮；

---

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

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

思路： 最保險的辦法是： 將格式處理成png8的 （因為我們一般保存的是PNG24）；

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

想將png24轉(zhuǎn)換成png8，方法也很簡單，使用photoshop轉(zhuǎn)換就可以了。

png24轉(zhuǎn)換成png8的具體方法為：文件-》存儲為web和設(shè)備所用格式-》在“預(yù)設(shè)”里，選擇“PNG-8”和“”透明度，保存即可。

優(yōu)缺點： 圖片質(zhì)量不好，不支持半透明，圖片有毛邊

---

方案7 - DD_belatedPNG解決方案：

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


目錄說明：



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

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

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

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


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

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

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

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


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


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


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

---

方案8 - EvPng解決方案：

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

目錄說明：


思路：
? ?? ???1、首先下載此方案所用到的文件， EvPng.zip ?
? ?? ???2、參考第七種方案的使用方法。


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


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


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

?

參考博客 http://www.ahuing.com/DIV+CSS/css_hack/ie6-png-touming-hack.html