首页 > web前端 > css教程 > 使用css解决png透明图片在ie6正常显示的方法

使用css解决png透明图片在ie6正常显示的方法

高洛峰
发布: 2017-03-27 17:25:53
原创
1674 人浏览过

很久没写CSS了,遇到一个png透明logo折腾了我很久,也怪以前的页面直接不考虑透明的问题。在网上找到几种办法,有用css实现的,有些是用js实现,用js感觉大材小用了,能用纯css解决就css吧,这里感谢蓝莓公主的帮助。以下的两种方法都是尝试过可行的,不过在我的虚拟机下的ie6图片完全透明了,不知道是不是我虚拟机的问题。
先将图片存为 PNG-24 透明格式。
(图片要绝对路径)
方法一:用png图作背景
要注意hack
html代码


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代码


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加上position:relative;

不过这里要提醒你,你这里的image路径是相对路径,那么值得注意的是,这个相对路径是根据html相对的,而不是CSS。

以上是使用css解决png透明图片在ie6正常显示的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板