【技術】IE6下png背景不透明問題<重要提示：存在bug，沒能徹底解決>

重要提示：存在bug，沒能徹底解決IE6下png背景不透明問題，好比：用jquery實現去陰影 jquery的版本用1.4.4的能夠，用1.7.2的js報錯；微軟發佈了一個新的補丁，是針對VML的，打了以後再使用DD_belatedPNG.js，PNG背景就會變成空的；... ...能夠用css sprite和png透明寫，詳見http://www.enkj.com/help/newscontent/4379或本博客園20140326《IE6下png圖片背景透明的方法》，能夠同時支持css sprite和png透明的。

 

IE6如下瀏覽器這裏不考慮。

 

前言：IE6不支持png背景透明或半透明。其解決方法有IE濾鏡，純粹的JavaScript，以及 jQuery等，正所謂事非通過不知難，讓png圖片在IE6下背景透明顯示只是第一步，若是對這些png圖片作進一步的操做，每每會出現各種莫名的問 題。而本篇文章講詳盡闡述png背景透明會出現哪些問題，一些本身的經驗之談和一些相關的拓展。內容較多，有必定的深度和廣度，但願對你們有幫助。

 

目錄：
1、可解決的方法
1. css濾鏡
2. 老JavaScript方法
3. jQuery實現
4. flash實現

 

2、產生的問題
1. 響應單擊事件
2. 圖片大小控制
3. 背景圖片的定位

 

3、相應的解決方法
1. 響應單擊事件
2. 圖片大小控制
3. 背景圖片的定位

 

4、相關延伸的問題
1. png8與png24的半透明顯示
2. IE7的半透明濾鏡與png背景透明

 

5、小結

 

1、可解決的方法

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實例頁面http://www.zhangxinxu.com/study/200908/filter-ie6-png-transparent.html

 

2.傳統的JavaScript
使用傳統的JavaScript方法，頁面只要連接一個小巧的JavaScript文件就能夠。例如，您能夠在頁面上添加以下代碼：

 

<script src=」http://www.zhangxinxu.com/study/js/png.js」 type=」text/javascript」></script>

（注：下爲http://www.zhangxinxu.com/study/js/png.js內容：）

 

if (!window.XMLHttpRequest) {
	window.attachEvent("onload", enableAlphaImages);
}

function enableAlphaImages(){
	for (var i=0; i<document.all.length; i++){
			var obj = document.all[i];
			var bg = obj.currentStyle.backgroundImage;
			var img = document.images[i];
			if (bg && bg.match(/\.png/i) != null) {
				var img = bg.substring(5,bg.length-2);
				var offset = obj.style["background-position"];
				obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
				obj.style.background = "none";
		} else if (img && img.src.match(/\.png$/i) != null) {
			var src = img.src;
			img.style.width = img.width + "px";
			img.style.height = img.height + "px";
			img.style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
			img.src = "http://s1.95171.cn/b/img/pixel.gif";
		}
	}
}

 

 

這個JavaScript文件是我以前一直使用的使png背景透明的JavaScript文件，它可讓頁面上全部的含有透明背景的png圖片透明 顯示，支持background-image的png圖片透明，可是不支持background-position定位；另外也不支持type類型爲 image的input框的png圖片透明。

 

若是您是IE6或內核是IE6的瀏覽器，建議進入demo實例頁面http://www.zhangxinxu.com/study/200908/js-ie6-png-transparent.html
在這個頁面，您能夠清晰的看出此JavaScript的應用範圍以及侷限性。

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

無論您是什麼瀏覽器，建議進入精彩的demo實例頁面http://www.zhangxinxu.com/study/200908/jQuery-ie6-png-transparent.html
您能夠在這個頁面上感覺到此png 背景透明插件的強大。

4.使用flash裝載png圖片
使用flash裝載png的原理是：flash對png的透明背景支持很是好，只要用戶安裝了flash插件，經過flash顯示的png圖片的背景一定是透明的。
實現的方法有兩類，一種適合對flash不太熟的，就是直接將圖片嵌入到flash中，方法以下：打開flash軟件->設置舞臺大小->將 png圖片拖到舞臺（或導入到舞臺）->導出flash->將swf插入在頁面中->完畢；可是這種方法維護不討方便，若是要更換圖 片，還要動flash源文件。另一種就是與頁面交互，從頁面獲取圖片路徑，最簡單的方法之一就是經過FlashVars傳參，再在flash中寫上極短 代碼就能夠了。

若是您感興趣，建議進入demo實例頁面http://www.zhangxinxu.com/study/200908/flash-ie6-png-transparent.html
頁面上顯示了flash獲取頁面參數的ActionScript代碼，ActionScript 3.0代碼，須要至少flash cs3版本的flash軟件，直接寫在第一幀上就能夠了，另外設置舞臺大小與圖片同樣大。

2、產生的問題

1.沒法響應單擊事件
這個問題在各個解決方法中都是存在的（即便是flash封裝png的方法，其自己也不能響應click事件，只能背景透明狀況下響應 onmousedown事件），不是指自己沒法響應單擊事件，而是其內部的標籤沒法響應。舉個簡單的例子吧，一個div標籤，裏面有個a標籤，a標籤有個 連接指向或有個js響應事件，而這個div標籤有個png透明背景的圖片，且在IE6下通過透明處理，那麼這個a標籤就是聾子的耳朵——擺設，只能看不能 用。多說不宜，眼見爲實，若是您的瀏覽器是IE6或內核爲IE6請進入http://www.zhangxinxu.com/study/200908/js-ie6-png-click-nouse.html，去感覺下我所說的單擊不響應是怎麼個不響應法吧。若是您如今使用的是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瀏覽器，能夠進入http://www.zhangxinxu.com/study/200908/js-ie6-png-size-nouse.html去看個清楚看個究竟。

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;）您會發現無論用。若是您不想麻煩，直接進入http://www.zhangxinxu.com/study/200908/jQuery-ie6-png-bg-pos-nouse.html去看看吧。ps：要是IE6瀏覽器，否則沒有效果的哦！

3、問題響應的解決方法

1.沒法響應單擊事件
要解決內部標籤沒法響應單擊事件的問題，關鍵要把內部標籤拿到外部，使用其餘方法進行覆蓋定位；或是不拿出來，使用另外的一個透明層或是透明圖片進行定位 與覆蓋。最關鍵了一個詞：覆蓋；最難點：定位。說到覆蓋性質的定位，無非兩類，一是相對或絕對定位，二是margin負值定位。因爲IE6下，父標籤是 position:relative;或是position:absolute屬性時，裏面的絕對定位層有時候會莫名消失，因此本身偏好於margin負 值定位以及position:relative的負值定位。在此問題的demo實例頁面最後一欄給了一個解決方法，margin負值定位解決的。方法很 多，也很自由，就是覆蓋，定位。您有興趣能夠試試進入http://www.zhangxinxu.com/study/200908/js-ie6-png-click-nouse.html去看看如何進行定位，若是解決此單擊不響應問題的。

2.圖片大小控制受到限制
這個問題的解決，說出來您不要笑我，就是去使用強大的jQuery png透明插件吧。這個插件不只可讓指定的png透明，還支持image類型的input的png圖片背景透明，更加劇要的是其支持png圖片的任意拉伸。
若是您是IE6瀏覽器，建議進入http://www.zhangxinxu.com/study/200908/jQuery-ie6-png-size-normal.html去看看圖片美妙的拉伸控制，若是您目前使用的不是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(http://image.zhangxinxu.com/image/blog/200908/png_btn.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(http://image.zhangxinxu.com/image/blog/200908/png_btn.png); margin:-40px 0 0;」 /></div>所顯示的結果就是「首頁」這個按鈕鼠標通過的狀態。經過margin控制圖片的位置，因爲父標籤高寬以設定且溢出隱 藏，因此就能夠經過對圖片的定位實現相似於background-position控制的效果。absolute絕對定位與margin定位實際上是同樣 的，都是定位，應用的css屬性不一樣而已。

b.若是您使用的是傳統的JavaScript使得png透明，那麼寫法能夠自由些。<img src=」http://image.zhangxinxu.com/image/blog/200908/png_btn.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大圖在頁面上定位的問題，我特意寫了一個演示頁面，詳見博客園20140326名爲ie6-png-background-position.zip的壓縮文件。若是您手頭上的就是IE6瀏覽器或您有IE6或以IE6爲內核的瀏覽器，建議進入http://www.zhangxinxu.com/study/200908/png-img-html-position.html，裏面有完整的代碼示例說明，相信可能會對上面我不逃清楚的措辭有進一步的瞭解。

4、相關延伸的問題

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

以下顯示：

若是您使用的正是IE6瀏覽器，進入demo實例頁面http://www.zhangxinxu.com/study/200908/png8-img-png24-show.html

我曾經遇到過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瀏覽器下看看，會有更加直觀的體驗與認識。