png透明問題分析及解決

2008-11-17 / Read(112)  Comments(1)  Category:html/css

在web前端開發(fā)中，經(jīng)常會遇到需要用背景或圖片透明的問題。

首先，目前我們所面臨的情況是：
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下的透明問題，但事情似乎沒有這么順利，很快我們就可以發(fā)現(xiàn)，當png作為透明背景的時候，會另自己失去焦點，此時加在上面的事件如：onmouseover,onclick等事件都失去了作用，這也是濾鏡的一個特性，這時候我們需要將該元素的position設置為relative就可以解決問題，即：
.pngbackground {
position:relative;
background:url(your.png);
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your.png',sizingMethod='scale');
}