精靈空間不少地方都有很酷的透明效果。 (下面附上幾個(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)透明效果。有興趣的朋友,不防一試。
新聞熱點(diǎn)
疑難解答
圖片精選