08-10
14
PNG图在IE6下透明的终极解决方案(已知3种)
作者:admin 日期:2008-10-14
现在做很多页面,比如阴影,或很多情况要用到透明图,GIF图一般会有很多锯齿,
用PNG图吧,效果到是还好。Firefox和IE7以上版本都支持PNG透明,但IE6缺会显示灰白。
百度,google搜罗一通,现总结如下两种。如有更好的方案,望交流
第一种,适用于图片做背景的时候。代码:
.first { width:400px; margin:0 auto; height:300px; background:url(images/bg1.png); }
* html .first { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg1.png"); background:none; }
第二种,适用于PNG图片放在页面上的时候
/*-------------IE6-PNG透明------------------------*/
* html img,
* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}
/*-------------------------------------------------------------------------*/
下面是源代码
png透明图FOR-IE6.rar
---------------------------------------------------------------------------------------
下面是在博客园看到的第三种解决方案,也不错!
附上DEMO。有需要可以下载看看。
PNG-ie6-透明
用PNG图吧,效果到是还好。Firefox和IE7以上版本都支持PNG透明,但IE6缺会显示灰白。
百度,google搜罗一通,现总结如下两种。如有更好的方案,望交流

第一种,适用于图片做背景的时候。代码:
.first { width:400px; margin:0 auto; height:300px; background:url(images/bg1.png); }
* html .first { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg1.png"); background:none; }
第二种,适用于PNG图片放在页面上的时候
/*-------------IE6-PNG透明------------------------*/
* html img,
* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}
/*-------------------------------------------------------------------------*/
下面是源代码
png透明图FOR-IE6.rar---------------------------------------------------------------------------------------
下面是在博客园看到的第三种解决方案,也不错!
附上DEMO。有需要可以下载看看。
PNG-ie6-透明评论: 2 | 引用: 0 | 查看次数: 3598
回复
]好像挺不错的方法,可惜没截图,把DEMO下来看看
非常感谢楼主,很好的解决方案,我用的是前两种,呵呵,都用上了。谢谢!
发表评论
上一篇
下一篇

文章来自:
Tags:
相关日志:








