233
人物
IE6下實現PNG透明。
大家好，歡迎大家光臨中電雲集幫助中心，在這裏大家可以找到很多關於建站技巧的文章和信息，在這裏我們來學習一下如何在IE6下實現PNG圖片的透明。
首先我們要先了解一下什麼是PNG，PNG是一種圖像文件存儲格式，其目的是試圖(原來此處使用了”企圖”)替代GIF和TIFF文件格式，同時增加一些GIF文件格式所不具備的特性。流式網絡圖形格式(Portable Network Graphic Format，PNG)名稱來源於非官方的“PNG’s Not GIF”，是一種位圖文件(bitmap file)存儲格式，讀成“ping”。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，並且還可存儲多到16位的α通道數據。PNG使用從LZ77派生的無損數據壓縮算法。 一般應用於JAVA程序中，或網頁或S60程序中是因為它壓縮比高，生成文件容量小。
通常，我們的站長朋友在使用ps 或fw製作圖片時都會忽略一個問題，就是設置PNG圖片的輸出。PNG有3種輸出色位，32位、24位和8位。 先手我們先來看一個案例，看看這3種色位在IE6下會呈現出什麼樣的效果。 圖1為我們的演示logo、圖2為IE6下 3種色位的效果，圖3為IE7下的效果。
圖1
圖2
圖3
我們很明顯可以看到在圖2中，IE6下 PNG 24和PNG 32都是不透明的，出現了灰底，而在非高於IE6版本的IE瀏覽器下或其他獨立內核的瀏覽器下都是可以正常顯示的，這樣我們得出的一個結論就是 隻要將圖片保存為PNG8就可以在IE6下實現透明了。
那這裏我就來告訴大家如何將一個製作好的圖片儲存為PNG 8，首先我們在PS上上選擇“文件”- “儲存為 Web 和設備所用格式”。如圖4.
圖4
我們在右側的上方設置要輸出的格式為PNG 8，另外大家可以根據自己的需求做一些相應的調整，例如砸變等，使其更能融合到你的網頁背景中去，在我們設置好之後就可以點“存儲”了，如圖5.
圖5
上述方法隻能應對與普通的沒有高級特效的PNG圖片，如果是一個有半透明效果的圖片我們要怎麼來做呢？其實很多高人都通過了JS來實現PNG 32在IE6下的透明，現在就來介紹給大家。首先我們來看一下圖6，圖6中是一個帶有半透明效果的PNG圖片。
圖6
下麵我們先看下半透明效果的 PNG 輸出為PNG8 、24、32之後在IE6和IE7下的效果。 圖7為IE6下的效果、圖8為IE7下的效果。
圖7
圖8
在圖7和圖8中我們很明顯的看到PNG8的半透明效果丟失了，顯然PNG8的方法是沒辦法滿足所有IE6下透明效果的，而PNG24和PNG32有不支持IE6下的透明，現在們可以通過一個JS來顯示。
首先我們需要在網頁文件的 <head>和</head>之間加上 如下代碼
<!–[if IE 6]>
<script src=”JS所在目錄/iepng.js” type=”text/javascript”></script>
<script type=”text/javascript”>
EvPNG.fix(’這裏填寫要生效的CSS樣式或HTML標簽，如輸入img 則會對所有<img src=”xxxx.png”>生效，如寫div 則會對所有DIV內的PNG背景生效，如寫 #logo 或.logo 則會對單獨的css樣式中的png背景生效，多個表情或css樣式請用半角的逗號分隔開’);
</script>
<![endif]–>
添加好代碼後將 iepng.js 放於代碼中指定的目錄內。 iepng.js下載 ，設置好對應的標簽或CSS樣式即可。圖9為IE6添加JS後的效果。
圖9
到這裏我們已經看到PNG32和PNG24在IE6下都實現了透明效果。可能在這篇文章中具體的方法還不是很明白，大家可能看不太懂，下麵我就把教程中演示的文件實例上傳給大家，大家可以看下是如何實現的。 演示實例下載。
如果你有更多的疑問，或者遇到了什麼困難可以發送郵件至jiangfei#chinaccnet.com,（將#更換為@）我們會盡快為你提供解決方案。
最後更新：2017-01-04 22:34:41