精靈空間不少地方都有很酷的透明效果。 （下面附上幾個(gè)截圖效果）。

首頁

如果你對圖片保存格式有些了解的話，你會發(fā)現(xiàn) gif圖片是可以保留部分透明效果的，在網(wǎng)頁中直接使用 gif圖片的話，可以部分透明，但效果并不完美，比如圖片邊沿不整齊，不能半透明等等。實(shí)際上，還有一種網(wǎng)頁中很常用的 .png格式的圖片可以很完美的保存圖片的透明效果。在 ps中設(shè)計(jì)出來的各種透明半透明效果，只要你正確的將它保存為 .png格式的話，圖片打開的效果幾乎和在 ps中是一樣的，邊沿很光滑，透明度也都一致。我們今天這里不重點(diǎn)討論怎么制作帶有透明效果的 .png格式圖片，我們來討論怎么讓它在網(wǎng)頁中完美的顯示出它的透明的魅力。

也許也有朋友嘗試過要做出一些透明的效果，也有朋友知道 .png圖片可以是有透明效果的，但是怎么一放到網(wǎng)頁里面，顯示的效果就變味了呢？

事實(shí)上， firefox是可以直接完美的支持 .png圖片的透明效果的。不信朋友們現(xiàn)在就可以試試，在網(wǎng)頁里面插入任何一個(gè)帶有透明效果的 .png圖片，用 firefox打開。

只可惜，現(xiàn)在畢竟還是使用 ie的同志占多數(shù)。偏偏 ie里面不能直接出這種效果。但肯定是有辦法解決的。我們知道 ie是支持濾鏡的。也許不少朋友也知道濾鏡可以做一些很不錯(cuò)的效果出來，但也許你不是很了解“ AlphaImageLoader ”這個(gè)濾鏡。它起的作用就是在 html dom元素的背景和內(nèi)容之間的導(dǎo)入一層圖片。如果這個(gè)圖片是帶有透明樣式的 .png圖片，它將完美的保留其透明樣式，并且在完全透明的部分，是鼠標(biāo)可穿透的。

我們來看一個(gè)在 ie里面的完整的透明樣式定義：

background-color : transparent ;

background-image : none ;

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="test.png", sizingMethod="crop") ;

首先，你要把樣式的背景顏色和背景圖片都設(shè)置為沒有。然后用濾鏡導(dǎo)入一個(gè) .png圖片，原則上就 ok了，其實(shí)也很簡單。

當(dāng)然我們不能只顧 ie里面如何。一般情況下，我們還需要考慮如何兼容 firefox。上面已經(jīng)說過了，在 firefox里面其實(shí)是可以直接兼容 .png的透明格式的，所以這里更簡單：

width : 16px ;

height : 42px ;

background : transparent url(images/Red_03.png) no-repeat ;

下面綜合起來看這個(gè)兼容的樣式應(yīng)該怎么寫：

. Transparent {

width : 16px ;

height : 42px ;

background : transparent url(images/transparent.png) no-repeat ;

}

* html . Transparent {

background-color : transparent ;

background-image : none ;

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ transparent.png", sizingMethod="crop") ;

}

為什么這樣可以兼容呢？

首先我們看，.Transparent這個(gè)樣式本身就是兼容firefox的。而后面的* html這個(gè)符號只有ie可以識別，熟悉樣式兼容的朋友肯定經(jīng)常用到這個(gè)寫法。那么* html . Transparent在ie里面就將覆蓋或者添加樣式的屬性，實(shí)現(xiàn)透明效果。有興趣的朋友，不防一試。