解决PNG图片在IE6中不能透明显示的问题(转)

最近因为一个客户网站上的图片PNG格式的,需要做成透明的效果,而IE6并不支持PNG的透明效果,所以只好使用CSS HACK或者JS来解决了,在网上搜索了下,下面这段代码正好能解决我的这个问题,现在特地贴出来,供需要这个效果的朋友使用。

/*
*  本文资料由MrMike.cn从网上搜索整理而成.
*  Hofox Technology (2008-2012) www.hofox.net
*  MrMike.CN致力于网站开发,网络推广,企业项目管理等方面的服务.
*/
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);
};

将这段代码复制粘贴到你的页面中,你页面上插入的PNG图片就不再有灰色的背景了,此代码在IE6下运行没问题。

虽然IE7+以上的浏览器已经支持PNG的图片,但是IE6在用户中的使用量还是比较大的,作为网站开发人员,我们可以作为一个兴趣爱好来看待这段代码。

经过再次测试,此代码如不做修改,目前仅对页面中所用的PNG图片有效,对CSS里的PNG背景图片无效。

文章原创:MrMike.cn

文章地址:http://www.mrmike.cn/website-development/technology-developmet-tutorials/png-images-ie6-display-transparent/

 » 本站地址:http://www.gomoth.com

标签: