by zhangxinxu from http://www.zhangxinxu.com/
本文地址： http://www.zhangxinxu.com/wordpress/?p=14
前言：IE6不支持png背景透明或半透明。其解決方法有IE濾鏡，純粹的JavaScript，以及jQuery等，正所謂事非經(jīng)過不知難，讓png圖片在IE6下背景透明顯示只是第一步，如果對這些png圖片做進(jìn)一步的操作，往往會出現(xiàn)各類莫名的問題。而本篇文章講詳盡闡述png背景透明會出現(xiàn)哪些問題，一些自己的經(jīng)驗之談和一些相關(guān)的拓展。內(nèi)容較多，有一定的深度和廣度，希望對大家有幫助。
目錄：
一、可解決的方法
1. css濾鏡
2. 老JavaScript方法
3. jQuery實現(xiàn)
4. flash實現(xiàn)
二、產(chǎn)生的問題
1. 響應(yīng)單擊事件
2. 圖片大小控制
3. 背景圖片的定位
三、相應(yīng)的解決方法
1. 響應(yīng)單擊事件
2. 圖片大小控制
3. 背景圖片的定位
四、相關(guān)延伸的問題
1. png8與png24的半透明顯示
2. IE7的半透明濾鏡與png背景透明
一、可解決的方法
1. IE css 濾鏡
IE css濾鏡中有一個使png背景透明的濾鏡，JavaScript方法也是應(yīng)用的這個濾鏡實現(xiàn)png背景透明的。
寫法：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’);
用法示例：
.png{background:url(../image/png_test.png);}
* html .png {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../image/png_test.png’);}
非IE6瀏覽器使用正常的background定位，IE6去除背景圖片，應(yīng)用png透明濾鏡。
如果您的瀏覽器或內(nèi)核為IE6，強(qiáng)烈建議點擊這里進(jìn)入demo實例頁面
2.傳統(tǒng)的JavaScript
使用傳統(tǒng)的JavaScript方法，頁面只要鏈接一個小巧的JavaScript文件就可以。例如，您可以在頁面上添加如下代碼：
<script src=”http://www.zhangxinxu.com/study/js/png.js” type=”text/javascript”></script>
這個JavaScript文件是我之前一直使用的使png背景透明的JavaScript文件，它可以讓頁面上所有的含有透明背景的png圖片透明顯示，支持background-image的png圖片透明，但是不支持background-position定位；另外也不支持type類型為image的input框的png圖片透明。
如果您是IE6或內(nèi)核是IE6的瀏覽器，強(qiáng)烈建議點擊這里查看demo實例頁面
在這個頁面，您可以清晰的看出此JavaScript的應(yīng)用范圍以及局限性。
3.jQuery png背景透明插件
相對于前面的方法，jQuery的IE6下png透明插件相對要強(qiáng)大些。
此插件js下載：jquery.pngFix.pack.js
使用的時候還要鏈接jQuery文件。
此js的強(qiáng)大之處在于不僅支持IE6下img標(biāo)簽的png背景透明，background-image的背景透明，還支持image類型的input的png背景透明那個，而且實現(xiàn)的精確控制，即您可以讓頁面上任意一張png圖片背景透明而其他不受影響。
不管您是什么瀏覽器，強(qiáng)烈建議您點擊這里進(jìn)入精彩的demo實例頁面吧。
您可以在這個頁面上感受到此png 背景透明插件的強(qiáng)大。
4.使用flash裝載png圖片
使用flash裝載png的原理是：flash對png的透明背景支持非常好，只要用戶安裝了flash插件，通過flash顯示的png圖片的背景必定是透明的。
實現(xiàn)的方法有兩類，一種適合對flash不太熟的，就是直接將圖片嵌入到flash中，方法如下：打開flash軟件->設(shè)置舞臺大小->將png圖片拖到舞臺（或?qū)氲轿枧_）->導(dǎo)出flash->將swf插入在頁面中->完畢；但是這種方法維護(hù)不討方便，如果要更換圖片，還要動flash源文件。另外一種就是與頁面交互，從頁面獲取圖片路徑，最簡單的方法之一就是通過FlashVars傳參，再在flash中寫上極短代碼就可以了。
如果您感興趣，建議您狠狠地點擊這里進(jìn)入demo實例頁面參觀參觀。
頁面上顯示了flash獲取頁面參數(shù)的ActionScript代碼，ActionScript 3.0代碼，需要至少flash cs3版本的flash軟件，直接寫在第一幀上就可以了，另外設(shè)置舞臺大小與圖片一樣大。
二、產(chǎn)生的問題
1.無法響應(yīng)單擊事件
這個問題在各個解決方法中都是存在的（即使是flash封裝png的方法，其本身也不能響應(yīng)click事件，只能背景透明情況下響應(yīng)onmousedown事件），不是指本身無法響應(yīng)單擊事件，而是其內(nèi)部的標(biāo)簽無法響應(yīng)。舉個簡單的例子吧，一個div標(biāo)簽，里面有個a標(biāo)簽，a標(biāo)簽有個鏈接指向或有個js響應(yīng)事件，而這個div標(biāo)簽有個png透明背景的圖片，且在IE6下經(jīng)過透明處理，那么這個a標(biāo)簽就是聾子的耳朵——擺設(shè)，只能看不能用。多說不宜，眼見為實，如果您的瀏覽器是IE6或內(nèi)核為IE6請狠狠地點擊這里，去感受下我所說的單擊不響應(yīng)是怎么個不響應(yīng)法吧。如果您現(xiàn)在使用的是Firefox，chrome或是opera，Safari，但是您有該死的IE6瀏覽器，建議您委曲求全，也進(jìn)來看看。
2.圖片大小控制受到限制
這個問題在css png透明濾鏡和老式的JavaScript方法中會遇到。問題簡述如下：咳咳，一個img標(biāo)簽的src路徑指向的是個含透明背景或半透明的png圖片（例如：<img src=”xx.png” />），并且在IE6下，此圖片受css濾鏡或老式的JavaScript png透明處理，那么對該圖片進(jìn)行的任何大小限制拉伸都是瞎子點燈——白費蠟。再具體點說吧，假設(shè)我們這里的xx.png原始大小128像素*128像素，您使用css，img{width:256px; height:256px;}或是直接<img src=”xx.png” alt=”” width=”256″ height=”256″ />再或者是用上style<img style=”width: 256px; height: 256px;” src=”xx.png” alt=”” />要將他拉伸到256像素*256像素，您會發(fā)現(xiàn)有條比蜀道更難走的路——這張圖片還是以其原始的大小顯示，只是占據(jù)的空間變了。
上圖為demo實例頁面的小小截圖，如果您是IE6瀏覽器，您可以狠狠地點擊這里去看個清楚看個究竟。
3.無法對背景圖片進(jìn)行background-position定位
有個名詞叫做css sprite。貌似是說很多背景圖片集中到一張大圖上，通過background-position定位，用到哪張圖片就顯示那部分區(qū)域，這好處大大的多，使用流行的很啊，優(yōu)化大小，減小服務(wù)器壓力，好處很多，里面頗有學(xué)問，但不是本文重點，不偏題。這個css sprite背景定位技巧在web2.0中可謂呼風(fēng)喚雨，如魚得水，但是遇到IE6瀏覽器，有時候他也只能哭了。如果背景圖片是個含有透明背景的png圖片，同時應(yīng)用了IE6下背景透明顯示處理的話，則該背景圖片對background-position完全免疫。隨便上面那個demo實例頁面，保存下來，給這些background-image為png的圖片再添加個background-position試試（比如background-position:-100px -100px;）您會發(fā)現(xiàn)不管用。如果您不想麻煩，直接狠狠地點擊這里去看看吧。ps：要是IE6瀏覽器，不然沒有效果的哦！
三、問題響應(yīng)的解決方法
1.無法響應(yīng)單擊事件
要解決內(nèi)部標(biāo)簽無法響應(yīng)單擊事件的問題，關(guān)鍵要把內(nèi)部標(biāo)簽?zāi)玫酵獠浚褂闷渌椒ㄟM(jìn)行覆蓋定位；或是不拿出來，使用另外的一個透明層或是透明圖片進(jìn)行定位與覆蓋。最關(guān)鍵了一個詞：覆蓋；最難點：定位。說到覆蓋性質(zhì)的定位，無非兩類，一是相對或絕對定位，二是margin負(fù)值定位。由于IE6下，父標(biāo)簽是position:relative;或是position:absolute屬性時，里面的絕對定位層有時候會莫名消失，所以自己偏好于margin負(fù)值定位以及position:relative的負(fù)值定位。在此問題的demo實例頁面最后一欄給了一個解決方法，margin負(fù)值定位解決的。方法很多，也很自由，就是覆蓋，定位。您有興趣可以試試點擊這里去看看如何進(jìn)行定位，如果解決此單擊不響應(yīng)問題的。
2.圖片大小控制受到限制
這個問題的解決，說出來您不要笑我，就是去使用強(qiáng)大的jQuery png透明插件吧。這個插件不僅可以讓指定的png透明，還支持image類型的input的png圖片背景透明，更加重要的是其支持png圖片的任意拉伸。
如果您是IE6瀏覽器，建議您狠狠地點擊這里去看看圖片美妙的拉伸控制，如果您目前使用的不是IE6瀏覽器，但是有，也建議您去看看。
3.無法對背景圖片進(jìn)行background-position定位
無法對背景圖片進(jìn)行background-position定位，那就拿到頁面上進(jìn)行定位就好了。使用img標(biāo)簽，src鏈接此背景大圖，或是用span標(biāo)簽，其高寬就是整個大背景圖的高寬，背景圖片就是大背景圖，在頁面上對img或span這類標(biāo)簽進(jìn)行定位，即可實現(xiàn)您想通過background-position實現(xiàn)的效果。
兩大方法，margin定位與position定位。
這里需要分情況敘述。
首先，如果您直接使用的是css 濾鏡或是傳統(tǒng)的png透明JavaScript的話，這里的定位就是純粹的margin定位或是absolute定位。這里概念說得比較含糊，實例說明吧。例如，我們將使用下面這張png按鈕圖片作為實例素材進(jìn)行說明。
a.如果您使用的是css png透明濾鏡，則需要將此png圖片寫在背景里，否則濾鏡不起作用。寫法如下：<img src=”http://www.zhangxinxu.com/study/image/pixel.gif” width=”640″ height=”80″ style=”background-image:url(http://image100.360doc.com/DownloadImg/2016/09/2116/80529718_3.png);” />（說明：這里的background-image要寫在css里面，這里是為了方便說明才用style表示的）然后您所要做的就是對這個img標(biāo)簽進(jìn)行margin定位或absolute定位。
例如，我這樣寫，<div style=”width:160px; height:40px; overflow:hidden;”><img src=”http://www.zhangxinxu.com/study/image/pixel.gif” width=”640″ height=”80″ style=”background-image:url(http://image100.360doc.com/DownloadImg/2016/09/2116/80529718_3.png); margin:-40px 0 0;” /></div>所顯示的結(jié)果就是“首頁”這個按鈕鼠標(biāo)經(jīng)過的狀態(tài)。通過margin控制圖片的位置，由于父標(biāo)簽高寬以設(shè)定且溢出隱藏，所以就可以通過對圖片的定位實現(xiàn)類似于background-position控制的效果。absolute絕對定位與margin定位其實是一樣的，都是定位，應(yīng)用的css屬性不同而已。
b.如果您使用的是傳統(tǒng)的JavaScript使得png透明，那么寫法可以自由些。<img src=”http://image100.360doc.com/DownloadImg/2016/09/2116/80529718_3.png” />的寫法也是可以的，其定位與上面是一樣的，直接通過設(shè)定class用css控制即可，一般不會出現(xiàn)莫名的錯誤的。
c.如果您使用的是jQuery png透明插件，則問題似乎不那么簡單的。原版的jQuery png透明插件使用頁面上定位解決background-position不起作用的問題是由局限性的。例如出現(xiàn)overflow:hidden失效的問題，img標(biāo)簽不受控制的問題，無法使用絕對定位的問題。我對其插件代碼簡單分析了下，找到上述問題的原因，并對原來的JavaScript代碼做了些修改，使其支持頁面上的類似background-position的定位效果。所以建議您下載修改后的png插件js。
另外，這里img標(biāo)簽失效是由于此插件處理透明的原理是，將原來的img標(biāo)簽隱藏，用一個span標(biāo)簽獲取img標(biāo)簽的相關(guān)樣式屬性，將src鏈接的png圖片以background-image的形式表示，并應(yīng)用png透明濾鏡。也就是說，代碼執(zhí)行的結(jié)果是將img標(biāo)簽換成span標(biāo)簽。所以如果您通過img標(biāo)簽控制圖片的位置大小或是其他什么屬性都是徒勞的。解決方法是用id或class進(jìn)行控制，您給img標(biāo)簽賦一個class，例如”png_pos”，則插件執(zhí)行后，這個class會轉(zhuǎn)移到span標(biāo)簽上，所以對”png_pos”這個class設(shè)置的樣式不會丟失，依舊在頁面上表現(xiàn)出來，而且不會出現(xiàn)兼容性的問題。
下面這張圖顯示的就是頁面定位后的效果圖，支持hover事件，鼠標(biāo)經(jīng)過導(dǎo)航按鈕按鈕背景變化的效果，乍看去像是background-position定位的效果，實際上是在頁面上使用margin定位的效果。
針對jQuery插件下png大圖在頁面上定位的問題，我特地寫了一個演示頁面，并提供源文件的打包下載。如果您手頭上的就是IE6瀏覽器或您有IE6或以IE6為內(nèi)核的瀏覽器，建議您狠狠地點擊這里，里面有完整的代碼示例說明，相信可能會對上面我不逃清楚的措辭有進(jìn)一步的了解。
四、相關(guān)延伸的問題
1.png8與png24的透明顯示
說了這么多IE6不支持png背景透明指的是png24格式保存的含有透明背景的圖片，而以png8格式存儲的png圖片的全透明背景是支持的。一個支持而另外一個不支持的原因在于：png24的透明背景是Alpha透明背景，而png8格式的全透明背景是索引透明背景與gif的透明背景是同一個類型。
如下顯示：
如果您使用的正是IE6瀏覽器，狠狠地點擊這里進(jìn)入demo實例頁面
我曾經(jīng)遇到過png圖片的半透明層直接被css png透明濾鏡當(dāng)作完全透明層處理掉的情況。但是今天我反復(fù)嘗試都沒有出現(xiàn)這個情況，我想可能當(dāng)時的png圖片是用fireworks制作，保存的時候?qū)D層分層信息也保存進(jìn)去了。既然，沒有再次出現(xiàn)這樣的問題，自己也不宜多說，妄下定論。
所說IE6支持png8的背景透明，但是最終的圖片效果跟gif的其實差別不太，都存在一個同樣的問題，鋸齒。就像上面這張圖，所說png8格式的圖片長得貌似還不錯，水靈水靈的。只要是正好是個白色背景，而png默認(rèn)也是白色鋸齒的，一重合，正好就看上去不錯了。可以要是是個深色背景，那就是白骨精遇見孫悟空——原形畢露啊。
有關(guān)鋸齒的問題，我會單獨寫篇文章，這里先簡單說個處理方法，例如上面的圖片，背景色為#666666灰色時，png白色鋸齒顯露，解決方法是在photoshop保存圖片的時候，將雜邊的顏色設(shè)為跟背景色一致就行了，例如這里雜邊顏色就設(shè)為#666666，
然后保存即可。
2. IE7的alpha半透明濾鏡與png背景透明
IE7 alpha半透明濾鏡會影響其png24 Alpha透明通道的正常顯示。下圖為demo實例頁面效果截圖：
圖中可以看到本應(yīng)透明顯示的部分現(xiàn)在確是黑色的一團(tuán)，怎一個“丑”字了得。
如果您有IE7瀏覽器，建議您將這個地址http://www.zhangxinxu.com/study/200908/ie7-filter-opacity-png.html放在IE7瀏覽器下看看，會有更加直觀的體驗與認(rèn)識。
五、小結(jié)
IE6注定要退出歷史舞臺，但是目前國內(nèi)的狀況來看，比如網(wǎng)吧，都是IE6瀏覽器；我的一些剛接觸電腦不久的親戚也都是使用的IE6瀏覽器。IE8的出現(xiàn)蠶食的只是IE7的比重，對IE6對沒有什么大的影響，所以這個退出的時間還真不好說，至少目前一段時間還是很有比重的，因此IE6下的些問題不得不拿出來說說，png透明的問題是非常典型的一個問題。這里我也只是將自己碰到的問題整理總結(jié)了一下，有些地方可能說得比較含糊，有些地方可能有遺漏，還有些則是不想展開的太多，亂了主線。不管怎樣，算是博客的第一篇技術(shù)類的文章吧，斷斷續(xù)續(xù)也寫了還幾天，希望這些糟糕的文字和略顯業(yè)余的實例頁面能對大家有幫助。至少在寫的過程中我是學(xué)到了不少的。共同進(jìn)步吧！
原創(chuàng)文章，轉(zhuǎn)載請注明：轉(zhuǎn)自張鑫旭-鑫空間-鑫生活 [http://www.zhangxinxu.com]
本文地址： http://www.zhangxinxu.com/wordpress/?p=14
標(biāo)簽： css相關(guān), flash, flash傳參, flash加載外部圖片, html, IE6, javascript, jQuery, png, png24, png8, 單擊事件, 圖片, 圖片鋸齒, 濾鏡, 背景定位, 背景透明, 透明
