html引入png不显示透明北京,完美解决透明png图片及透明png背景，兼容所有浏览器...

*将以下代码保存为png.js*/

function correctPNG() {

for(var i=0; i

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 + "' "

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 = "

imgTitle

+ " style=\"" + "width:" + img.width + "px; height:" + img.height +

"px;" + imgStyle + ";"

+

"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+ "(src=\'" + img.src + "\',

sizingMethod='scale');\">

" img.outerHTML = strNewHTML

i = i-1

}

}

}

window.attachEvent("onload", correctPNG);

在body下

< script type="text/java script "

src="inc/png.js"> script

>

如果在网页中直接插入png图片想使其透明只需加入以下js代码，整个页面内的所有直接插入的png图片都可以实现透明：

< script language="Java script

">

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

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 = "

imgTitle

+ " style=\"" + "width:" + img.width + "px; height:" + img.height +

"px;" + imgStyle + ";"

+

"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+ "(src=\'" + img.src + "\',

sizingMethod='scale');\">

" img.outerHTML = strNewHTML

j = j-1

}

}

} }

window.attachEvent("onload", correctPNG);

script >

--------------------------------------------------------------------

如果是想使用png做背景透明的话，需要用到css滤镜和hack：

html>body .png { background:url(1.png);

width:300px; height:100px; border:#000 solid 1px;}

* html .png { filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,

sizingMethod=scale, src='1.png');

background:none; width:300px; height:100px; border:#000 solid

1px;}

============================================

IE6不支持PNG半透明图片的缺陷为web设计带来了极大的不便，之前曾经介绍过用滤镜+hack的方法实现显示PNG，不过实现起来相当繁琐。还有一种网上比较流行的方法，更加简便，下面详细介绍这种方法：

把以下代码保存为correctpng.js

function correctPNG()

{

for(var i=0;

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 + "' "

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 =

"

+ " style=\"" + "width:" +

img.width + "px; height:" + img.height + "px;" + imgStyle +

";"

+

"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+ "(src=\'" + img.src + "\',

sizingMethod='scale');\">

"

img.outerHTML =

strNewHTML

i = i-1

};

};

};

if(navigator.userAgent.indexOf("MSIE")>-1)

{

window.attachEvent("onload", correctPNG);

};

在网页的头部引用一下

< script language=Java script

src="correctpng.js" type=text/java script > script

>

使用的时候直接用img标签即可。

这个最管用

< script language="Java script

"> 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

<= 6.0) &&

(document.body.filters)) {

for(var j=0; j

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 = "

imgTitle

+ " style=\"" + "width:" + img.width + "px; height:" + img.height +

"px;" + imgStyle + ";" + "margin:0;"

+

"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+ "(src=\'" + img.src +

"\');\">

" img.outerHTML = strNewHTML

j = j-1

}

}

} }

function alphaBackgrounds(){

var rslt =

navigator.appVersion.match(/MSIE (d+.d+)/, '');

var itsAllGood = (rslt != null

&& Number(rslt[1])

>= 5.5);