快捷導(dǎo)航

PNG背景在不同瀏覽器下的應(yīng)用

更新時(shí)間：2009年06月22日 00:16:29 作者：

論壇中kayeun在我的版面發(fā)了一個(gè)問題，關(guān)于PNG透明背景在FIREFOX瀏覽器下顯示異常。這里談一下不同瀏覽器內(nèi)，如何應(yīng)用PNG圖片作背景。

一、在IE6中使用PNG背景
IE6本身并不認(rèn)識(shí)PNG圖片的透明特性，雖然有讓IE6支持PNG透明背景的JS程序：

function correctPNG() 
{ 
var arVersion = navigator.appVersion.split("MSIE") 
var version = parseFloat(arVersion[1]) 
if ((version >= 5.5) && (document.body.filters)) 
{ 
for(var j=0; j<document.images.length; j++) 
{ 
var img = document.images[j] 
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 + "' " 
var imgStyle = "display:inline-block;" + img.style.cssText 
if (img.align == "left") imgStyle = "float:left;" + imgStyle 
if (img.align == "right") imgStyle = "float:right;" + imgStyle 
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
var strNewHTML = "<span " + imgID + imgClass + imgTitle 
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
img.outerHTML = strNewHTML 
j = j-1 
} 
} 
} 
} 
window.attachEvent("onload", correctPNG); 

但是如果需要實(shí)現(xiàn)的地方僅有一處，還是用CSS來實(shí)現(xiàn)效率更高一些。這里應(yīng)用的是IE5.5+的AlphaImageLoader濾鏡：

復(fù)制代碼代碼如下:

filter: 
progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='temp.png',sizingMethod='scale') 

需要注意的是：AlphaImageLoader濾鏡會(huì)導(dǎo)致該區(qū)域的鏈接和按鈕無效，解決的辦法是為鏈接或按鈕添加：position: relative;使其相對(duì)浮動(dòng)。另外AlphaImageLoader無法設(shè)置背景的重復(fù)，所以對(duì)圖片的切圖精度會(huì)有較高要求。
二、在IE7、Opera和firefox中使用PNG背景
這幾款瀏覽器對(duì)PNG背景的支持很好，可以直接應(yīng)用。而實(shí)際應(yīng)用中，我們需要同時(shí)照顧IE6瀏覽器，所以需要給樣式表加上*html來做兼容處理。也就是給同一標(biāo)簽兩次背景。
例如：

復(fù)制代碼代碼如下:

.uicss_cn{background:transparent url(../images/temp.png) repeat-x bottom left;height:3px;position:absolute;width:100%; font-size:0px;} 
*html .uicss_cn{background:transparent; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/temp.png", sizingMethod="crop");} 

三、補(bǔ)充一點(diǎn)
3月27號(hào)，無意中發(fā)現(xiàn)，自己插入的PNG背景兼容代碼無效。最后證實(shí)問題出在圖片文件上。使用fireworks生成的部分png圖片，需要導(dǎo)出為PSD格式，再從PS里另存為PNG文件，即可。