IE6不支持PNG图片透明效果的完美解决方案(完善版)
可怜的IE6,不支持PNG图片透明,
这已经是其众多“BUG”中,不是那么显眼的一个,
但也是让部分人头痛的一个了。
(今天在机房那破机器上IE6忘了抓图了,现在想给大家看效果也难啊。)
发个PNG大家看看。 如果用IE6的朋友,请在下面回复截个图!谢谢啦。
[attach]641886[/attach]
想查看区别的,请到这个页面
http://www.54caizi.org/demo/enablePngImages.html
所以,只有借助滤镜来实现透明了。
方法一: 复制内容到剪贴板
代码:
<div align="center" style="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png图片路径 ',sizingMethod='image'); " width="100px" height="100px"></div>这样的话,需要在每一PNG都这么做,显然不合适。而且设计的时候也不直观。
方法二:
将下面的代码保存为“png.js” 复制内容到剪贴板
代码:
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 type="text/javascript" src="png.js"></script>经过实际测试。
这种方法在普通模式下,问题不大。
但是问题来了:
1、如果图片未指明大小(width/height),那么,最终显示的尺寸将是(0px*0px),也就是说:啥也没有。
2、如果把图片放在隐藏层中(<div style="display:none;">...),那么,同上。程序获得不到图片大小。
这么一来,也不能完美解决了。
OK!那么我们来完善一下吧!
既然获取不到代码中的图片尺寸,我们何不直接读取图片的实际尺寸呢? 复制内容到剪贴板
代码:
<!--对于隐藏层中的图片,或者其他原因导致图片尺寸无法获得-->
<!--此时我们需要读取图片的真实大小-->
<!--以免宽高都为0px而导致图片不显示-->
var imgTrueWidth=0;
var imgTrueHeight=0;
if(img.width==0)
{
var imgPng=new Image();
imgPng.src=img.src;
imgTrueWidth=imgPng.width;
imgTrueHeight=imgPng.height;
}我们通过 Image对象,来获得其真实大小。然后最终代码如下: 复制内容到剪贴板
代码:
function correctPNG4IE6()
{
//获得全部图片
var imgs=document.getElementsByTagName("IMG");
for(var i=0; i<imgs.length; i++)
{
var img = imgs[i];
var imgName = img.src.toUpperCase();
<!--操作PNG图片-->
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;
<!--对于隐藏层中的图片,或者其他原因导致图片尺寸无法获得-->
<!--此时我们需要读取图片的真实大小-->
<!--以免宽高都为0px而导致图片不显示-->
var imgTrueWidth=0;
var imgTrueHeight=0;
if(img.width==0)
{
var imgPng=new Image();
imgPng.src=img.src;
imgTrueWidth=imgPng.width;
imgTrueHeight=imgPng.height;
}
<!--用<span>替换<img>标签-->
var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"";
strNewHTML=strNewHTML+"width:" + (img.width==0?imgTrueWidth:img.width) + "px; height:";
strNewHTML=strNewHTML+(img.height==0?imgTrueHeight:img.height) + "px;";
strNewHTML=strNewHTML+imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";
strNewHTML=strNewHTML+"(src='" + img.src + "', sizingMethod='scale');\"></span>";
<!--执行替换-->
img.outerHTML = strNewHTML;
i = i-1;
}
}
}
<!--加载完毕,执行代码-->
window.attachEvent("onload", correctPNG4IE6);