ie6PNG兼容

PNG圖像格式介紹：

PNG是20世紀90年代中期開始開發的圖像文件存儲格式，其目的是企圖替代GIF和TIFF文件格式，同時增長一些GIF文件格式所不具有的特性。流式 網絡圖形格式(Portable Network Graphic Format，PNG)名稱來源於非官方的「PNG’s Not GIF」，是一種位圖文件(bitmap file)存儲格式，讀成「ping」。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，而且還可 存儲多到16位的α通道數據。

IE6下PNG背景透明的顯示問題

PNG格式比起GIF來表現色彩更豐富，特別是表現漸變以及背景透明的漸變要比GIF格式出色不少，目前，最新的瀏覽器基本上都支持PNG格式。可是IE6不支持PNG背景透明，會顯示一個灰色的框。

IE6下PNG背景透明的解決辦法

.pngImg { background:url(image.png); _background:url(image.gif);} 
注意上文的_號，目前IE7,8以及Firefox瀏覽器等都不支持此CSS語法，只有IE6識別。所以，其餘瀏覽器會調用PNG，而IE6剛調用GIF。

 

相信如何解決png在ie6下透明的問題困擾了不少人。爲了追求更好的頁面效果，不少人喜歡使用png格式的圖片，偏偏由於ie6下png圖片的透明問題，不少人不得不退而求其次地改用gif格式的圖片。今天就來介紹一個ie6下png透明的解決辦法，支持background（含position、repeat、img src）。

一、 DD_belatedPNG簡介：

DD_belatedPNG是一個免費的js庫，它的做用是讓png格式圖片在ie6下透明，支持<IMG>中的src元素；在背景應用上支持css的background-image屬性，固然包含最重要的是支持background-position和background-repeat，對於喜歡CSS Spirit的人來講是個好消息。

二、 實現原理：

使用Microsoft VML替代AlphaImageLoader濾鏡，好處就是支持position和repeat，完美支持實現流行的CSS Spirit（CSS雪碧）。

三、 使用方法：

在<header>與</header>之間添加以下代碼：

1 2 3 4 5 6 7 8 9 10 11

<!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <script>    /* EXAMPLE */    DD_belatedPNG.fix(''.class, #id'');       /* string argument can be any CSS selector */    /* .png_bg example is unnecessary */    /* change it to what suits you! */ </script> <![endif]-->