先将图片存为 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 && http://blog.51cto.com/viewpic.php?refimg= + this.src.tolowercase().indexof('.png')>-1 ? (this.runtimestyle.backgroundimage = none,
this.runtimestyle.filter = progid:dximagetransform.microsoft.alphaimageloader(src=\'#\' //qianduangcs.blog.51cto.com/2624849/ + http://blog.51cto.com/viewpic.php?refimg= + this.src + ', sizingmethod='image'),
http://blog.51cto.com/viewpic.php?refimg= + 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。
以上就是使用css解决png透明图片在ie6正常显示的方法的详细内容。