IE6下PNG背景透明的七種方法小結

2024-07-11 08:47:21

字體：大中小

來源：轉載

供稿：網友

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。

二.濾鏡filter解決IE6下背景灰

background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png" ,sizingMethod="crop");
上面的原理是其他調用PNG，IE6,則先設背景沒有，然后調用濾鏡使之顯示PNG圖片。

缺陷：IE6下背景無法平鋪，這個問題很嚴重。同時在性能上也有小問題，頁面中次數不是很多的時候該辦法還是可行的。

AlphaImageLoader濾鏡會導致該區域的鏈接和按鈕無效，解決的辦法是為鏈接或按鈕添加：position: relative;這樣條代碼，使其相對浮動。AlphaImageLoader無法設置背景的重復，所以對圖片的切圖精度會有很高的精確度要求。

解決IE下的鏈接無效可用最后面的方法：

三.利用JS解決html中的img(插入在網頁中的png圖像)png背景灰問題

頁面中插入一段js即可。原理同上，只是將img標簽用標簽替換掉，并且通過濾鏡設置該標簽的background。它會將所有插入的PNG都如此處理。

復制代碼

上一篇：設置span 寬度的完美解決方案

下一篇：兼做美工之導航條制作過程分享