快捷導(dǎo)航

實(shí)現(xiàn)png圖片和png背景透明（支持多瀏覽器）的方法

更新時(shí)間：2009年09月08日 22:42:13 作者：

Firefox和Opera對(duì)PNG的支持非常的好，都是IE卻無視PNG圖片這一特性的“存在”，雖然IE7已經(jīng)支持都是IE6還是不行。

雖然有讓IE6支持PNG透明背景的JS程序，都是不是很方便，還是用CSS來實(shí)現(xiàn)的好。使用到的就是：IE5.5+的AlphaImageLoader濾鏡。
1.png背景透明
解決辦法：

 
#div1 { 
height: 600px; 
width: 260px; 
padding: 20px; 
background-repeat: repeat; 
} 
html>body #div1 { 
background-repeat: repeat;background-image: url(bj1.png); 
} 
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png") 
} 

附加：IE才識(shí)別的通配符（*），來定義IE瀏覽器中的濾鏡
Firefox、Opera等完全支持PNG透明圖片的瀏覽器也支持子選擇器（>）
語法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
屬性：
enabled : 可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。true | false
　　　　　　true : 默認(rèn)值。濾鏡激活。
　　　　　　false : 濾鏡被禁止。
sizingMethod : 可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。 crop : 剪切圖片以適應(yīng)對(duì)象尺寸。
　　　　　　　　image : 默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。
　　　　　　　　scale : 縮放圖片以適應(yīng)對(duì)象的尺寸邊界。
　　　　　　　　src : 必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。
2.png圖片透明
如果在網(wǎng)頁(yè)中直接插入png圖片想使其透明只需加入以下js代碼，整個(gè)頁(yè)面內(nèi)的所有直接插入的png圖片都可以實(shí)現(xiàn)透明：

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

 
<script language="JavaScript"> 
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. 
{ 
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); 
</script> 