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標簽用<span>標簽替換掉,并且通過濾鏡設置該<span>標簽的background。它會將所有插入的PNG都如此處理。
<!–[if IE 6]>
<script>
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id='” + img.id + “‘ ” : “”;
var imgClass = (img.className) ? “class='” + img.className + “‘ ” : “”;
var imgTitle = (img.title) ? “title='” + img.title + “‘ ” : “title='” + img.alt + “‘ “;
新聞熱點
疑難解答