解決IE6背景圖片有灰白背景的情況 轉

標籤：

 前言：IE6不支援png背景透明或半透明。其解決方案有IE濾鏡，純粹的JavaScript，以及jQuery等，正所謂事非經過不知難，讓png圖片在IE6下背景透明顯示只是第一步，如果對這些png圖片做進一步的操作，往往會出現各類莫名的問題。而本篇文章講詳盡闡述png背景透明會出現哪些問題，一些自己的經驗之談和一些相關的拓展。內容較多，有一定的深度和廣度，希望對大家有協助。

一、可解決的方法

1. IE css 濾鏡
IE css濾鏡中有一個使png背景透明的濾鏡，JavaScript方法也是應用的這個濾鏡實現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去除背景圖片，應用png透明濾鏡。
如果您的瀏覽器或核心為IE6，強烈建議點擊這裡進入demo執行個體頁面

2.傳統的JavaScript
使用傳統的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或核心是IE6的瀏覽器，強烈建議點擊這裡查看demo執行個體頁面
在這個頁面，您可以清晰的看出此JavaScript的應用範圍以及局限性。

3.jQuery png背景透明外掛程式
相對於前面的方法，jQuery的IE6下png透明外掛程式相對要強大些。
此外掛程式js下載：jquery.pngFix.pack.js
使用的時候還要連結jQuery檔案。
此js的強大之處在於不僅支援IE6下img標籤的png背景透明，background-image的背景透明，還支援image類型的input的png背景透明那個，而且實現的精確控制，即您可以讓頁面上任意一張png圖片背景透明而其他不受影響。

不管您是什麼瀏覽器，強烈建議您點擊這裡進入精彩的demo執行個體頁面吧。
您可以在這個頁面上感受到此png 背景透明外掛程式的強大。

4.使用flash裝載png圖片
使用flash裝載png的原理是：flash對png的透明背景支援非常好，只要使用者安裝了flash外掛程式，通過flash顯示的png圖片的背景必定是透明的。
實現的方法有兩類，一種適合對flash不太熟的，就是直接將圖片嵌入到flash中，方法如下：開啟flash軟體->設定舞台大小->將png圖片拖到舞台（或匯入到舞台）->匯出flash->將swf插入在頁面中->完畢；但是這種方法維護不討方便，如果要更換圖片，還要動flash源檔案。另外一種就是與頁面互動，從頁面擷取圖片路徑，最簡單的方法之一就是通過FlashVars傳參，再在flash中寫上極短代碼就可以了。

如果您感興趣，建議您狠狠地點擊這裡進入demo執行個體頁面參觀參觀。
頁面上顯示了flash擷取頁面參數的ActionScript代碼，ActionScript 3.0代碼，需要至少flash cs3版本的flash軟體，直接寫在第一幀上就可以了，另外設定舞台大小與圖片一樣大。

二、產生的問題

1.無法響應單擊事件
這個問題在各個解決方案中都是存在的（即使是flash封裝png的方法，其本身也不能響應click事件，只能背景透明情況下響應onmousedown事件），不是指本身無法響應單擊事件，而是其內部的標籤無法響應。舉個簡單的例子吧，一個div標籤，裡面有個a標籤，a標籤有個連結指向或有個js響應事件，而這個div標籤有個png透明背景的圖片，且在IE6下經過透明處理，那麼這個a標籤就是聾子的耳朵——擺設，只能看不能用。多說不宜，眼見為實，如果您的瀏覽器是IE6或核心為IE6請狠狠地點擊這裡，去感受下我所說的單擊不響應是怎麼個不響應法吧。如果您現在使用的是Firefox，chrome或是opera，Safari，但是您有該死的IE6瀏覽器，建議您委曲求全，也進來看看。

2.圖片大小控制受到限制
這個問題在css png透明濾鏡和老式的JavaScript方法中會遇到。問題簡述如下：咳咳，一個img標籤的src路徑指向的是個含透明背景或半透明的png圖片（例如：<img src=”xx.png” />），並且在IE6下，此圖片受css濾鏡或老式的JavaScript png透明處理，那麼對該圖片進行的任何大小限制展開都是瞎子點燈——白費蠟。再具體點說吧，假設我們這裡的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像素，您會發現有條比蜀道更難走的路——這張圖片還是以其原始的大小顯示，只是佔據的空間變了。

 

為demo執行個體頁面的小小，如果您是IE6瀏覽器，您可以狠狠地點擊這裡去看個清楚看個究竟。

3.無法對背景圖片進行background-position定位
有個名詞叫做css sprite。貌似是說很多背景圖片集中到一張大圖上，通過background-position定位，用到哪張圖片就顯示那部分地區，這好處大大的多，使用流行的很啊，最佳化大小，減小伺服器壓力，好處很多，裡面頗有學問，但不是本文重點，不偏題。這個css sprite背景定位技巧在web2.0中可謂呼風喚雨，如魚得水，但是遇到IE6瀏覽器，有時候他也只能哭了。如果背景圖片是個含有透明背景的png圖片，同時應用了IE6下背景透明顯示處理的話，則該背景圖片對background-position完全免疫。隨便上面那個demo執行個體頁面，儲存下來，給這些background-image為png的圖片再添加個background-position試試（比如background-position:-100px -100px;）您會發現不管用。如果您不想麻煩，直接狠狠地點擊這裡去看看吧。ps：要是IE6瀏覽器，不然沒有效果的哦！

三、問題響應的解決方案

1.無法響應單擊事件
要解決內部標籤無法響應單擊事件的問題，關鍵要把內部標籤拿到外部，使用其他方法進行覆蓋定位；或是不拿出來，使用另外的一個透明層或是透明圖片進行定位與覆蓋。最關鍵了一個詞：覆蓋；最痛點：定位。說到覆蓋性質的定位，無非兩類，一是相對或絕對位置，二是margin負值定位。由於IE6下，父標籤是position:relative;或是position:absolute屬性時，裡面的絕對位置層有時候會莫名消失，所以自己偏好於margin負值定位以及position:relative的負值定位。在此問題的demo執行個體頁面最後一欄給了一個解決方案，margin負值定位解決的。方法很多，也很自由，就是覆蓋，定位。您有興趣可以試試點擊這裡去看看如何進行定位，如果解決此單擊不響應問題的。

2.圖片大小控制受到限制
這個問題的解決，說出來您不要笑我，就是去使用強大的jQuery png透明外掛程式吧。這個外掛程式不僅可以讓指定的png透明，還支援image類型的input的png圖片背景透明，更加重要的是其支援png圖片的任意展開。
如果您是IE6瀏覽器，建議您狠狠地點擊這裡去看看圖片美妙的展開控制，如果您目前使用的不是IE6瀏覽器，但是有，也建議您去看看。

3.無法對背景圖片進行background-position定位
無法對背景圖片進行background-position定位，那就拿到頁面上進行定位就好了。使用img標籤，src連結此背景大圖，或是用span標籤，其高寬就是整個大背景圖的高寬，背景圖片就是大背景圖，在頁面上對img或span這類標籤進行定位，即可實現您想通過background-position實現的效果。
兩大方法，margin定位與position定位。

這裡需要分情況敘述。
首先，如果您直接使用的是css 濾鏡或是傳統的png透明JavaScript的話，這裡的定位就是純粹的margin定位或是absolute定位。這裡概念說得比較含糊，執行個體說明吧。例如，我們將使用下面這張png按鈕圖片作為執行個體素材進行說明。
 

a.如果您使用的是css png透明濾鏡，則需要將此png圖片寫在背景裡，否則濾鏡不起作用。寫法如下：<img src=”http://www.zhangxinxu.com/study/image/pixel.gif” width=”640″ height=”80″ style=”background-image:url(/uploads/allimg/100312/0R45360U-2.png);” />（說明：這裡的background-image要寫在css裡面，這裡是為了方便說明才用style表示的）然後您所要做的就是對這個img標籤進行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(/uploads/allimg/100312/0R45360U-2.png); margin:-40px 0 0;” /></div>所顯示的結果就是“首頁”這個按鈕滑鼠經過的狀態。通過margin控製圖片的位置，由於父標籤高寬以設定且溢出隱藏，所以就可以通過對圖片的定位實作類別似於background-position控制的效果。absolute絕對位置與margin定位其實是一樣的，都是定位，應用的css屬性不同而已。

b.如果您使用的是傳統的JavaScript使得png透明，那麼寫法可以自由些。<img src=”/uploads/allimg/100312/0R45360U-2.png” />的寫法也是可以的，其定位與上面是一樣的，直接通過設定class用css控制即可，一般不會出現莫名的錯誤的。

c.如果您使用的是jQuery png透明外掛程式，則問題似乎不那麼簡單的。原版的jQuery png透明外掛程式使用頁面上定位解決background-position不起作用的問題是由局限性的。例如出現overflow:hidden失效的問題，img標籤不受控制的問題，無法使用絕對位置的問題。我對其外掛程式代碼簡單分析了下，找到上述問題的原因，並對原來的JavaScript代碼做了些修改，使其支援頁面上的類似background-position的定位效果。所以建議您下載修改後的png外掛程式js。
另外，這裡img標籤失效是由於此外掛程式處理透明的原理是，將原來的img標籤隱藏，用一個span標籤擷取img標籤的相關樣式屬性，將src連結的png圖片以background-image的形式表示，並應用png透明濾鏡。也就是說，代碼執行的結果是將img標籤換成span標籤。所以如果您通過img標籤控製圖片的位置大小或是其他什麼屬性都是徒勞的。解決方案是用id或class進行控制，您給img標籤賦一個class，例如”png_pos”，則外掛程式執行後，這個class會轉移到span標籤上，所以對”png_pos”這個class設定的樣式不會丟失，依舊在頁面上表現出來，而且不會出現相容性的問題。
下面這張圖顯示的就是頁面定位後的，支援hover事件，滑鼠經過導覽按鈕按鈕背景變化的效果，乍看去像是background-position定位的效果，實際上是在頁面上使用margin定位的效果。
 

針對jQuery外掛程式下png大圖在頁面上定位的問題，我特地寫了一個示範頁面，並提供源檔案的打包下載。如果您手頭上的就是IE6瀏覽器或您有IE6或以IE6為核心的瀏覽器，建議您狠狠地點擊這裡，裡面有完整的程式碼範例說明，相信可能會對上面我不逃清楚的措辭有進一步的瞭解。

四、相關延伸的問題

1.png8與png24的透明顯示
說了這麼多IE6不支援png背景透明指的是png24格式儲存的含有透明背景的圖片，而以png8格式儲存的png圖片的全透明背景是支援的。一個支援而另外一個不支援的原因在於：png24的透明背景是Alpha透明背景，而png8格式的全透明背景是索引透明背景與gif的透明背景是同一個類型。

如下顯示：

如果您使用的正是IE6瀏覽器，狠狠地點擊這裡進入demo執行個體頁面

我曾經遇到過png圖片的半透明層直接被css png透明濾鏡當作完全透明層處理掉的情況。但是今天我反覆嘗試都沒有出現這個情況，我想可能當時的png圖片是用fireworks製作，儲存的時候將圖層分層資訊也儲存進去了。既然，沒有再次出現這樣的問題，自己也不宜多說，妄下定論。

所說IE6支援png8的背景透明，但是最終的圖片效果跟gif的其實差別不太，都存在一個同樣的問題，鋸齒。就像上面這張圖，所說png8格式的圖片長得貌似還不錯，水靈水靈的。只要是正好是個白色背景，而png預設也是白色鋸齒的，一重合，正好就看上去不錯了。可以要是是個深色背景，那就是白骨精遇見孫悟空——原形畢露啊。
 

有關鋸齒的問題，我會單獨寫篇文章，這裡先簡單說個處理方法，例如上面的圖片，背景色為#666666灰色時，png白色鋸齒顯露，解決方案是在photoshop儲存圖片的時候，將雜邊的顏色設為跟背景色一致就行了，例如這裡雜邊顏色就設為#666666，
然後儲存即可。

2. IE7的alpha半透明濾鏡與png背景透明
IE7 alpha半透明濾鏡會影響其png24 Alpha透明通道的正常顯示。為demo執行個體頁面效果：

 

圖中可以看到本應透明顯示的部分現在確是黑色的一團，怎一個“醜”字了得。

如果您有IE7瀏覽器，建議您將這個地址http://www.zhangxinxu.com/study/200908/ie7-filter-opacity-png.html放在IE7瀏覽器下看看，會有更加直觀的體驗與認識。

五、小結

IE6註定要退出曆史舞台，但是目前國內的狀況來看，比如網吧，都是IE6瀏覽器；我的一些剛接觸電腦不久的親戚也都是使用的IE6瀏覽器。IE8的出現蠶食的只是IE7的比重，對IE6對沒有什麼大的影響，所以這個退出的時間還真不好說，至少目前一段時間還是很有比重的，因此IE6下的些問題不得不拿出來說說，png透明的問題是非常典型的一個問題。這裡我也只是將自己碰到的問題整理總結了一下，有些地方可能說得比較含糊，有些地方可能有遺漏，還有些則是不想展開的太多，亂了主線。不管怎樣，算是部落格的第一篇技術類的文章吧，斷斷續續也寫了還幾天，希望這些糟糕的文字和略顯業餘的執行個體頁面能對大家有協助。至少在寫的過程中我是學到了不少的。共同進步吧！

解決IE6背景圖片有灰白背景的情況 轉