中财网gentoo安装2017:png透明问题分析及解决
来源：百度文库 编辑：中财网 时间：2024/05/05 21:44:19
png透明问题分析及解决
2008-11-17 / Read(112) Comments(1) Category:html/css
在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');
}