网页前端设计

在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');
}

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