接下來介紹幾種PNG圖片在IE6中不透明的解決辦法

1、用自己的PNG，讓IE6一邊去吧

首先制作PNG圖片的時(shí)候，另存為一個(gè)GIF圖片，因?yàn)镮E6是支持GIF圖片透明,然后在css定義

.pngtest{ background:url(mark.png); _background:url(mark.gif);}

優(yōu)點(diǎn)：方便、快捷，使用超簡單

缺點(diǎn)：對(duì)于PNG圖片只是某些局域透明，該方法比較奏效，但圖片要是半透明的話，這種方法就實(shí)現(xiàn)不了

該方法延伸的另外一種解決辦法：用PS或者其他圖片編輯工具把png圖片保存為8位格式的，這樣IE6就支持透明了

2、CSS濾鏡實(shí)現(xiàn)PNG圖片半透明

.pngwrap{ padding:80px; background:green;}.pngtest{ width:165px; height:50px; overflow:hidden; text-indent:-9999em;background:url(http://www.qmtx3.com/data/mark/mark.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.qmtx3.com/data/mark/mark.png' sizingMethod='scale' enabled=true);}

測試IE6利用CSS濾鏡解決PNG圖片透明問題

代碼說明：_前綴的css屬性只有IE6能識(shí)別，至于為什么要加上_background:none;，原因是前面定義的background圖片的層深（可以理解為屬性的z-index），比filter的要高，就會(huì)把filter定義的圖片擋住，所以這里要讓IE6的背景為none，PS：filter中的圖片路徑可以為遠(yuǎn)程圖片路徑，也可以是相對(duì)路徑，如果使用相對(duì)路徑，那應(yīng)該是相對(duì)于頁面的路徑而非CSS

優(yōu)點(diǎn)：不需要JS補(bǔ)丁，圖片維護(hù)成本低，因?yàn)榫鸵粡坧ng圖片

缺點(diǎn)：filter定義的圖片不支持 background-position:;(定位) background-repeat:;(平鋪)屬性，所以不能使用CSS Sprite技術(shù)，且該方法不能應(yīng)用于img標(biāo)簽上，當(dāng)應(yīng)用于鏈接a標(biāo)簽上時(shí)有時(shí)會(huì)導(dǎo)致鏈接無法點(diǎn)擊的情況，此時(shí)需要定義該a標(biāo)簽position:relative

3、HTC插件PNG圖片IE6任我行

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

下載IE6瀏覽器PNG圖片透明HTC插件

復(fù)制iepngfix.htc和blank.gif文件到你網(wǎng)站目錄（復(fù)制 blank.gif、iepngfix.htc、iepngfix_tilebg.js(該文件是支持position和repeat屬性必不可少的)到放置到某個(gè)位置；）

定義將會(huì)使用PNG圖片的標(biāo)簽上定義,如下css樣式

img,div{behavior:url(iepngfix.htc);}

修改iepngfix.htc中IEPNGFix.blankImg = 'images/blank.gif';路徑為你的圖片路徑

讓IE6瀏覽器加載JS文件

<!--[if IE 6]><script type="text/javascript" src="../js/iepngfix_tilebg.js"></script><![endif]-->

優(yōu)點(diǎn)：配置好這個(gè)，那整個(gè)站點(diǎn)要使用就很方便了，一次配置，終身受用

缺點(diǎn)：配置相對(duì)方法，網(wǎng)站會(huì)多出三個(gè)文件，不支持元素hover等偽類，不能使用CSS Sprite技術(shù)，頁面加載初期還是會(huì)看到png圖片透明區(qū)域是灰色的

4、CSS版JS解決方法

該方法也需要一個(gè)透明的blank.gif圖片，第三方法壓縮包中有，這里不單獨(dú)提供了，定義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 = "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);}

代碼說明：this.src = "blank.gif" 路徑也是相對(duì)于頁面文件的，而非CSS文件

優(yōu)點(diǎn)：方法相對(duì)簡單

缺點(diǎn)：需要添加一個(gè)透明圖片blank.gif，僅支持img標(biāo)簽即不支持元素設(shè)置的PNG背景圖片，不支持元素hover等偽類，剛加載時(shí)也會(huì)出現(xiàn)灰色

5、原生態(tài)javascript解決辦法

javascript解決IE6 PNG圖片不透明的插件比較多，看個(gè)人喜好選擇使用了

插件一：iepngfix

下載IE6瀏覽器PNG圖片透明iepngfix插件

讓IE6瀏覽器加載JS文件

<!--[if IE 6]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]-->

插件二：DD_belatedPNG

該插件應(yīng)該算是真正意義上的插件了，其使用方法很插件化

下載IE6瀏覽器PNG圖片透明DD_belatedPNG插件

本博備份：DD_belatedPNG.js

<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->

使用方法：

DD_belatedPNG.fix(".pngtest,#pngtest,.pngtest img,.pngtest:hover");

<!--[if IE 6]>    <script type="text/javascript" src="js/DD_belatedPNG.js"></script>    <script language="javascript" type="text/javascript">    window.onload = function(){        DD_belatedPNG.fix("*");    }    </script><![endif]-->

fix()參數(shù)傳遞要透明元素 或者子元素，該方法和jQuery選擇$使用基本相同，只是多個(gè)元素間分隔用的是","而jQ用的是空格，為了更方便可以在文件結(jié)尾加上

w3cfuns的解決方法是，在每個(gè)用到png的標(biāo)簽都加上id或class，然后寫成

window.onload = function(){   DD_belatedPNG.fix(".pngFix,.pngFix:hover");}

這樣在頁面中在需要透明的元素上加class="pngFix xx bbb"，class中只要包含有pngFix就可以了

優(yōu)點(diǎn)：支持img標(biāo)簽，CSS Sprite、背景、平鋪、偽類，不需要配置啥，引入JS就可以使用，贊一個(gè)

缺點(diǎn)：加載初期PNG圖片會(huì)出現(xiàn)灰色

插件三：EvPng

該插件使用方法包括優(yōu)缺點(diǎn)都跟DD_belatedPNG相同，不再詳述

下載IE6瀏覽器PNG圖片透明EvPng插件

<!--[if IE 6]>    <script type="text/javascript" src="js/EvPng.js"></script>    <script language="javascript" type="text/javascript">    window.onload = function(){        EvPNG.fix("*");    }    </script><![endif]-->

插件四：jQueryPngFix插件

下載IE6瀏覽器PNG圖片透明jQueryPngFix插件

博客備份：JqueryPngFix

修改pngfix.js文件中blankgif: 'images/blank.gif'透明GIF圖片路徑為相對(duì)頁面路徑

讓IE6瀏覽器加載JS文件

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

?

優(yōu)點(diǎn)：支持img、css背景

缺點(diǎn)：需要jQuery庫支持，不支持CSS Sprite、平鋪、偽類，加載初期會(huì)出現(xiàn)灰色

有了這種方法htc的解決方案，顯得多于了，不過這里介紹的htc解決IE6 PNG透明問題只是htc功能的冰山一角，htc在其他方面的應(yīng)用遠(yuǎn)遠(yuǎn)比這強(qiáng)大的多

參考：

http://www.w3cfuns.com/forum.php?mod=viewthread&tid=297

http://www.cnblogs.com/rock506/archive/2010/11/30/1892067.html

http://www.xuanfengge.com/ie6-png-transparency-solution.html