网页前端设计

http://www.86y.org

搜索文章

解决IE6 png透明问题

用声音读出全文关注我吧
 2011/7/6 9:28:40 阅读次数:7466

在web前端开发中,经常会遇到需要用背景或图片透明的问题。

首先,目前我们所面临的情况是:
1.在ie7+,firefox,safari,opera这些常用浏览器中,直接使用透明png是没有问题的,但在ie6下却不能透明。

2.ie6目前的时常份额仍然很大,我们必须考虑兼容ie6的问题。

解决办法:
1.使用gif代替,再各个浏览器中都可以透明,但效果不好,有毛边,这种在图片像素较单一,质量要求不是很高的情况下可以采用。

2.使用png,但需要在ie下做额外处理。

3.需要专门下载微软的ie6升级包,但不能要求每个用户都去升级,因此此方法这里不做考虑。

png图片透明解决办法

1.准备一张透明的小图片transparent.gif。
2.样式如下:
 

.pngfix {
azimuth: expression(
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 = "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);
}

然后将此样式加入到img标签即可。

png背景透明解决办法

.pngbackground{
background:url(your.png);
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your.png',sizingMethod='scale');
}

注:当属性前面加_,则只在ie6下被解析。那么到目前为止,基本解决了png在ie6下的透明问题,但事情似乎没有这么顺利,很快我们就可以发现,当png作为透明背景的时候,会另自己失去焦点,此时加在上面的事件如:onmouseover,onclick等事件都失去了作用,这也是滤镜的一个特性,这时候我们需要将该元素的position设置为relative就可以解决问题,即:

.pngbackground {
position:relative;
background:url(your.png);
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your.png',sizingMethod='scale');
}

大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭