png透明图片在ie6正常显示用css如何实现?

发布时间:2020-06-10编辑:脚本学堂
今天遇到一个png透明logo很是费劲,看网上有用css实现的,有用js实现,建议用css来解。以下的两种方法都是尝试过可行的,不过在我的虚拟机下的ie6图片完全透明了,不清楚是不是虚拟机的问题。需要的朋友好好研究一下吧。

首先将图片存为 PNG-24 透明格式。(图片要绝对路径)
方法一:用png图作背景,要注意hack
html代码

<div class="logo"><a href="/">logo</a></div>

css代码

.logo { width: 338px; height: 57px; float: left;  url( /images/logo.png) 0px 0px no-repeat!important; text-indent: -1000px; _background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" /images/logo.png', senabled='true', sizingMethod='scale'); }

标准:

_background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" /templets/dyimgs/wymrs/images/logo.png',
enabled='bEnabled', sizingMethod='image');

方法二:插入png图片,定义img,这个方法要准备一完全透明的图片transparent.gif,大小随意。
html:

<div class="logo"><a href="/"><img src='#'" /images/logo.png" alt="logo" /></a></div>

css代码

.logo { width: 338px; height: 57px; float: left;  }
.logo img {  width: 338px; height: 57px; }

/* png 透明 兼容 ie6 */

.logo img {
azimuth: expression(
 this.pngSet ? this.pngSet = true:(this.nodeName == "IMG" && "www.jb200.com=" + this.src.toLowerCase().indexOf('.png')>-1 ?
 (this.runtimeStyle.backgroundImage = "none",
 this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#'" //qianduangcs.blog.51cto.com/2624849/" + "www.jb200.com=" +
 this.src + "', sizingMethod='image')",
 "www.jb200.com=" + 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='#'" //qianduangcs.blog.51cto.com/2624849/" + this.origBg + "',
 sizingMethod='crop')",
 this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
}

有时候超链接加了这个透明滤镜,页面上所有超级连接 <a href=""> </a>全点不到了。解决办法是:给a加上position:relative;这里要提醒你,这里的image路径是相对路径,注意的是,这个相对路径是根据html相对的,而不是CSS。