png-24在ie6中的幾種透明方法

由于遊戲類官網在頁面背景和裝飾人物的設計上追求畫麗且與遊戲風格想比對，這就給前端頁面制作人員帶來了很多的麻煩，一個頁面的制作主要時間和精力花費在相容ie6上，而ie6因為不相容png-24的圖檔一直被開發人員所鄙視。

由于市場決定了頁面的存在的價值，是以ie6還是必須要相容。

下面介紹幾種常用的解決辦法：

引入js檔案

<!--[if IE 6]>

<script type="text/javascript" src="js/dd_belatedpng.js"></script>

<script>

    DD_belatedPNG.fix('.pngfix');

</script>

<![endif]-->

然後對需要進行ie6下透明的元素進行class标注。

特點是在很大程度上能解決png-24的透明問題，但是也有幾個問題比較明顯。

1. 需要引入js檔案。

2. 他會動态在png-24圖像上包裹一層css為position:relative;的元素，使原有的position:absolute;的元素消失不見或出現其它意想不到的bug。

解決辦法：在png-24的圖像上再添加一層position:relative;的dom元素，或者不使用絕對定位或使用其它辦法。

js辦法失效後，可以用這種辦法使圖檔透明。

background:url(/images/game_box.png) 0 0 no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/game_box.png',sizingMethod='crop'); 

  當然這種辦法的缺點:

1. 濾鏡的性能問題一直是ie浏覽器的一個瓶頸。

2. background-position 無法實作。

在不要求圖檔背景滾動的情況下，可以在進階浏覽器裡邊使用png-24的圖檔，然後用截圖工具抓取需要透明的區域，然後直接使用截圖後的圖檔。

這種方法的優點是沒有相容性問題，而且在保證圖檔大小的情況下能正常顯示，缺點就是操作比較複雜，而且截圖也會使圖檔的顔色資訊造成部分遺失。

還有一種辦法是用js判斷是ie6浏覽後，添加不同的圖檔。根據浏覽器的不同來使用不同的圖檔。

這個辦法使用于，使用者市場比較成熟的産品或界面，不考慮低端ie6浏覽器使用者，但也保證在浏覽器下能正常顯示，隻是圖檔的品質稍為差點罷了。

本文轉自豪情部落格園部落格，原文連結：http://www.cnblogs.com/jikey/archive/2013/03/13/2957168.html，如需轉載請自行聯系原作者