JS使png背景图片透明

+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
第一种：把下面的代码放在head区就可以解决问题了。
<script language="javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
if (navigator.appName!="Microsoft Internet Explorer") {return false}
return true
}
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
img.width=LW
img.height=LH
}
}
}
if (isIE()) {window.attachEvent("onload", correctPNG);}
</script>
点评:这种方法确实能解决这个问题，但是如果不是在本地调试，通常需要一段时间的转换!
方法三:
} 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=\"站长吧 \" />"
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
第二种：把这段代码单独加在一张图片上：
<span
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='你的图片名称.png',sizingMethod='scale');"></span>
png图片有很好的品质，阴影效果也不会有杂边，很流畅。如果插入网页的话可以给网站内容增色不少！更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如在有颜色过渡背景上插入不规则边框的图片，带来极大和便利！
பைடு நூலகம்
但目前IE中对于插入的透明背景的png的图片是不能正常显示的，IE会自动给".png"格式的图片加个灰色背景。解决这个的方法是增加javascript，具体方法有两种：
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
}
</script>
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
点评:这种方法虽然较好的解决了IE 5+的浏览器，但却得本来能正常显示透明PNG图片的FireFox无法正常显示!
方法二:
<script type="text/javascript">
// PNG纠正控件 1.0 For IE 5.5或更高.
// 作者:舜子
function isIE(){
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
{
img.style.filter+="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img.src+", sizingmethod=scale);"
img.src="/transparent.gif"//transparent.gif为1px*1px的透明gif图片
{
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")
<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=\"站长吧 \" />"
} 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=\"站长吧 \" />");
目前大部分浏览器对PNG的支持并不完善,IE虽然可以显示PNG图片，但如果PNG图片中含有透明部分，那么透明部分的显示就不正常了。
解决这个问题大致有以下方法(其原理都是通过AlphaImageLoader滤镜来解决)。
方法一:
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png);width:200px;height:50px"></div>
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
<div id="header"><!--此DIV为需要插入PNG图片的区域-->