现在做很多页面,比如阴影,或很多情况要用到透明图,GIF图一般会有很多锯齿,
用PNG图吧,效果到是还好。Firefox和IE7以上版本都 支持PNG透明,但IE6缺会显示灰白。
百度,google搜罗一通,现总结如下两种。如有更好的方案,望交流
第一种,适用于图片做背景的时候。
代码:
<style> body { background: url(body-bg.jpg); /* 添加基本背景图 */ } .vehicles { width: 500px; height: 176px; background: url(vehicles.png) no-repeat; /* 为vehicles类添加背景图 */ } /* 注:我在vehicles类名前添加了”html”, 我这样做就不会使background属性与另一个样式表冲突了. */ html .vehicles { background: none; /* 隐藏当前背景图从而使用后面的滤镜重置它 */ width: 500px; /* 必须指定宽度 */ height: 176px; /* 必须指定高度 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png'); } </style> <div class=”vehicles”></div>
第二 种,适用于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-透明
我一般采用后两个方案的结合,一个是用在页面中的图片,一个用在容器背景中的图片。