PNG图在IE6下透明的终极解决方案

系统 1653 0

现在做很多页面,比如阴影,或很多情况要用到透明图,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: e­xpression((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图在IE6下透明的终极解决方案


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论