JS使png背景图片透明

 　png图片有很好的品质，阴影效果也不会有杂边，很流畅。如果插入网页的话可以给网站内容增色不少！更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如在有颜色过渡背景上插入不规则边框的图片，带来极大和便利！

　　但目前IE中对于插入的透明背景的png的图片是不能正常显示的，IE会自动给".png"格式的图片加个灰色背景。解决这个的方法是增加javascript，具体方法有两种：

　　第一种：把下面的代码放在head区就可以解决问题了。 

<script language="javascript">  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 + "' "     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     i = i-1    }  }  }  window.attachEvent("onload", correctPNG);  </script>

  

　　第二种：把这段代码单独加在一张图片上： 

<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='你的图片名称.png',sizingMethod='scale');"></span>

 

 

 

目前大部分浏览器对PNG的支持并不完善,IE虽然可以显示PNG图片，但如果PNG图片中含有透明部分，那么透明部分的显示就不正常了。

解决这个问题大致有以下方法(其原理都是通过AlphaImageLoader滤镜来解决)。

方法一:

<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png);width:200px;height:50px"></div>

点评:这种方法虽然较好的解决了IE 5+的浏览器，但却得本来能正常显示透明PNG图片的FireFox无法正常显示!

方法二:

<script type="text/javascript">
// PNG纠正控件 1.0 For IE 5.5或更高.
// 作者:舜子

function isIE(){
if (navigator.appName!="Microsoft Internet Explorer") {return false}
return true
}

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images
var LW=img.width
var LH=img.height
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
img.style.filter+="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img.src+", sizingmethod=scale);"
img.src="/images/transparent.gif"//transparent.gif为1px*1px的透明gif图片
img.width=LW
img.height=LH
}
}
}
if (isIE()) {window.attachEvent("onload", correctPNG);}
</script>


点评:这种方法确实能解决这个问题，但是如果不是在本地调试，通常需要一段时间的转换!


方法三:

<div id="header"><!--此DIV为需要插入PNG图片的区域-->
<script type="text/javascript">
if (navigator.appName!="Microsoft Internet Explorer") {
document.write("<img src=/"/images/header.png/" width=/"200/" height=/"50/" alt=/"站长吧 Master8.NET/" />");
} else {
document.write("<img style=/"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;/" src=/"{$rootpath}/images/transparent.gif/" width=/"200/" height=/"50/" alt=/"站长吧 Master8.NET/" />");
}
</script>
<div>
点评:事实上网页中绝对需要使用透明PNG图片的地方并不多，所以如果你的网页中仅仅是一两处使用透明PNG图片，建议用这种方法。

如果浏览者禁用了js,方法二和三当然失去了作用。针对方法三，可以做一些完善:

<div id="header">
<div id="Index_header">图片简要说明,正常浏览本站请不要禁用js</div>
<div>

<script type="text/javascript">
if (navigator.appName!="Microsoft Internet Explorer") {
document.getElementById('logo').innerHTML="<img src=/"/images/header.png/" width=/"200/" height=/"50/" alt=/"站长吧 Master8.NET/" />"
} else {
document.getElementById('logo').innerHTML="<img style=/"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;/" src=/"/images/transparent.gif/" width=/"200/" height=/"50/" alt=/"站长吧 Master8.NET/" />"
}
</script>