在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');
}
转自:
http://www.ok22.org/art_detail.aspx?id=178
分享到:
相关推荐
第一种:复制进去就能使ie6 png透明 第二种:IE6下PNG背景透明的解决办法
解决IE6 PNG图片透明问题解决IE6 PNG图片透明问题解决IE6 PNG图片透明问题解决IE6 PNG图片透明问题解决IE6 PNG图片透明问题
IE6不兼容png透明背景解决方法,有效解决IE6下 透明图片浅灰背景的问题
完美解决IE6下png背景、图片透明问题
解决ie6下png透明问题 在页面引入这个js文件,让回EvPNG.fix();
解决ie6png透明的js插件,里面有demo
ie6 png 透明度 解决方法 通过js调用,完美实现ie6透明度的兼容问题
今天解决png图片在IE6下的背景透明问题,找到了一个好方法。之前的解决方案会造成错位,使页面变形。现把这个方法公布如下,本人亲测可以正常使用,如果你在使用中出现问题,请看实例中的说明(英文不精的童鞋可以用...
js_IE6支持png透明解决png_ie6下不透明背景图片
DD_belatedPNG完美地解决了“iepngfix.htc”会出现的无法平铺,没法定位以及所加超链接的点击区域无法使用等问题!
ie6中png透明解决方案 js 物有所值,解压,直接点开看png.html
然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e-xpression, 再到javascript透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat. 而我...
ie 下png 透明图片 兼容解决方案
3,demo-htc通过iepngfix.htc文件实现透明度,同时通过修改html结构得到想要的结果,但存在文档内容顺序的问题。 4,最后,demo-DD,此方法完美解决,不过需要在设置png背景的div上添加class=“png”的类。
MS IE6下png图像不透明解决办法。
关于ie6png图片透明的解决方法,只需要调用这三个文件即可
IE6PNG透明背景显示灰色--解决方法(IE7.js)
IE6PNG透明背景显示灰色--解决方法(unitpngfix.js)
网页设计在制作网站时时常会遇见IE6的PNG图片透明兼容问题,网上也有很多介绍关于IE6浏览器不显示PNG透明图片的解决方案,但多数是有问题的。应用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和...
现在很多web开发者都对ie6的png不能透明的问题头疼。这里推荐一个插件,方便大家使用。谢谢。