讓ie6對png透明圖片支持起來

【聲明：此文僅是對低版本ie使用透明圖片的一個研究，當時出於工作要求，所以花費了一番心思在兼容舊版本ie上，現在對ie8都是做降級處理了。不培養用戶壞習慣、引導用戶跟隨潮流體驗新技術應是我們前端開發者的責任。】

 

一個老生常談的問題就是ie6不支持透明png圖片啊。但其實ie6只是不支持png-24格式的透明背景圖片，但對透明背景的png-8圖片還是支持的，只是png-8圖片只有256色，放到任意瀏覽器都會呈現白色的鋸齒。

當代碼這樣時：

<style type="text/css"> .gif{ width: 400px; height:200px; background:#f00 url(png8.png) no-repeat;
     }
 </style>

<div class="gif"></div>

 

div中的背景圖片是下圖的透明背景png-8圖片：

瀏覽器打開的效果如下（chrome，firefox，ie6+都是這么個效果）：

 

 

看到這些泛白的鋸齒要哭瞎了，怎么去除這惡心的鋸齒呢，ps保存png-8圖片時，有多個選項，經測試通過勾選“擴散透明度仿色”時鋸齒的能達到最小，

 

如下圖所示，鋸齒此時沒那么惡心：

但是遠遠不夠啊，這個視覺效果還是太差了。上網查詢下，這是由於png-8白色雜邊導致的問題，可以在保存圖片前將雜邊的顏色設置成和背景一致來解決。

在ie6下的效果如下，其他瀏覽器顯示效果也一致：

 

此時ie6下png-8透明背景圖片能正常顯示了，且不只是針對ie6，對其他瀏覽器也是用，好像很好用，但是png-8只有256色啊，色彩不豐富，而現在廣泛使用的png-24有2^24=1678萬色，能展示很豐富的色彩，而且沒有鋸齒。所以如果原圖色彩很豐富，那么只能轉換為png-8圖片作為降級的方法用到ie6上。還有個問題是，雜邊處理的前提是圖片覆蓋區域的背景色是單色，如果是多種顏色，那么總會出現鋸齒了。

 

我們需要尋找更靈活的方法，ie有專用的AlphaImageLoader過濾器，可以讓ie6支持png-24的透明背景，而不是將透明色顯示為灰色,這里要用到ie hack技巧，將background-image設置為none去掉背景圖片，在使用濾鏡加載圖片。AlphaImageLoader過濾器中的參數src指向要顯示的png-24圖片，sizingMethod有3個可選值：crop：直接放置到容器中，圖片左上角對齊容器左上角，image：讓容器的邊緣調整至包住整個圖片，scale：讓圖片調整至充滿整個容器。

 .gif{ width: 400px; height:200px; background: #f00 url(ie6.png) no-repeat; *background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_24.png',sizingMethod=crop);
      }

 

效果妥妥的：

 

不過需要注意的是瀏覽器會有提示，需要用戶點擊允許才能運行濾鏡效果，否則不僅沒有濾鏡效果，而且由於取消了背景圖片，圖片壓根就看不到（只看到紅色，字是見不到的，圖略）：

 

如果覺得一個個圖片添加濾鏡效果麻煩，還可以用js寫個函數一次性將頁面所有png圖片抓出來添加ie濾鏡效果。不過用戶喜歡禁掉js腳本的話，就呵呵了。

 

 

還有一種方法是利用ie專有的css擴展--行為，引用.htc文件來修復png透明背景問題（也有使用.htc文件來解決圓角框的）:

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

 

這里有個介紹這種技術的網站：http://www.twinhelix.com/css/iepngfix/，也可以直接下載demo文件,詳細使用流程在demo頁面有引導：www.twinhelix.com/css/iepngfix/iepngfix.zip。

未引用htc文件，可以看到背景灰藍色：

 

 

 

引用htc文件后，透明背景正常顯示了（需要點擊允許運行阻止的內容才能正常顯示）：

 

 

 

讓ie6支持透明背景的png的方法就總結到這里。既然是兼容，就不可能百分百完美，具體用什么技術去完成網頁的開發還是要思量下再做決定。雖然開發者總是吐槽兼容舊版本瀏覽器很惡心，但是舊版本瀏覽器曾經也作出過巨大貢獻。

 

補充：

評論區有人說連ie8都不去兼容了，我不想多說，拿數據說話，下圖截取自百度對瀏覽器市場份額統計。過去的3個月ie8用戶占了21.62%，ie7用戶占5.12%，ie6用戶占3.85%，我想你作為開發者，不兼容ie低版本，難道是你的網站不對30%的用戶開放？當然這個統計基於一般情況，如果知道訪問自己網站的特定用戶群都使用chrome或firxfox瀏覽器，那當然可以不去兼容ie低版本。js框架基本拋棄低版本，這個是事實，因為js框架大部分都是外國人寫的。而外國人基本用chrome瀏覽器，這不符合國情，國內依然有很多人在用低版本的ie瀏覽器，甚至都懶得去升級。我始終覺得，不去兼容多方瀏覽器的不是好開發者，因為兼容各方瀏覽器是每個開發者的分內事，而你永遠無法要求用戶使用和你一樣的瀏覽器。

 

 

-------------------------------轉載注明出處^_^：  http://www.cnblogs.com/suspiderweb/