解决PNG图片在IE6下背景不透明的问题让IE6支持PNG透明背景

by 清泉 11. 九月 2008 09:19

PNG图片在FF下是透明，但IE6下会变成浅蓝色的，下面的方法可以有效解决PNG图片在IE6下背景不透明的问题

IE6下PNG图片背景不透明的问题解决方法一:
给CSS控制文件加入如下CSS属性进行控制就可以解决PNG在IE6下面不透明的问题:

* html div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="tran.png");
background:none;
}

注意：这里我们使用了 “*”的CSS hack，这个CSS Hack是Internet Explorer 6独有的，在Ineternet Explorer 6的DOM结构中，默认HTML的父节点为*，而在标准的DOM结构中HTML就是根节点。所以上面的CSS 规则只有Internet Explorer 6 认识。

这样，我们在Internet Explorer 6、7、Firefox、Opera等最常用的浏览器的都实现了半透明效果了。

IE6下PNG图片背景不透明的问题解决方法二:
在网页head部分引用下面的这段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;
};
};
};
if(navigator.userAgent.indexOf("MSIE") > -1)
{
window.attachEvent("onload", CorrectPNG);
};