IE6下实现PNG图片透明

 
更多

我们都知道使用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和Opera对PNG的支持都没问题,都是IE却无视PNG图片这个优秀的特性,虽然现在IE7已经支持了,但是IE6却还是不行。具体的问题就是在IE6中的”.png”格式的图片会无端的被加上了灰色的背景。对于这种问题,网上有很多解决问题的办法,作者经过实践也总结出了几种办法解决这个问题,现记录如下。
 
(1)使用javascript实现ie6下png图片透明,具体代码如下:

<script language="javascript">
function TransparentPNG(){
	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",TransparentPNG);
</script>

(2)引入png格式图片的时候按如下写法:

<div align="center" style="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png图片路径',sizingMethod='image');"></div>

(3)使用国外牛人写的一个插件:

插件下载地址:http://www.dillerdesign.com/experiment/DD_belatedPNG/#download

压缩版直接下载地址:http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js

在页面中加入如下代码:

<!--[if IE 6]>
<script type="text/javascript" src="http://www.phpernote.com/js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('.pngFix');</script>
<![endif]-->

以上将会将所有class属性值为pngFix的png图片的背景设置为透明的。

以上方法个人推荐使用第三种方法。

打赏

本文固定链接: https://www.cxy163.net/archives/4345 | 绝缘体

该日志由 绝缘体.. 于 2013年05月23日 发表在 未分类 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: IE6下实现PNG图片透明 | 绝缘体
关键字: , , , ,

IE6下实现PNG图片透明:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter