完美解决透明图片背景在各个浏览器中的兼容问题

完美解决透明png图片及透明png背景，兼容所有浏览器

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

https://www.360docs.net/doc/6c7242899.html,

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 +

https://www.360docs.net/doc/6c7242899.html,

"px;" + imgStyle + ";"

+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+ "(src=\'" + img.src + "\', sizingMethod='scale');\">"

img.outerHTML = strNewHTML

i = i-1

}

}

}

window.attachEvent("onload", correctPNG);

https://www.360docs.net/doc/6c7242899.html,

在body下

https://www.360docs.net/doc/6c7242899.html,

如果在网页中直接插入png图片想使其透明只需加入以下js代码，整个页面内

的所有直接插入的png图片都可以实现透明：

https://www.360docs.net/doc/6c7242899.html,

https://www.360docs.net/doc/6c7242899.html,

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

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

https://www.360docs.net/doc/6c7242899.html,

html>body .png { background:url(1.png); width:300px; height:100px;

border:#000 solid 1px;}

/* ie6 */* html .png { filter:

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

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

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

1px;}

https://www.360docs.net/doc/6c7242899.html,

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

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(https://www.360docs.net/doc/6c7242899.html,erAgent.indexOf("MSIE")>-1)

{

window.attachEvent("onload", correctPNG);

};

在网页的头部引用一下

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

这个最管用

https://www.360docs.net/doc/6c7242899.html,