html 透明gif,CSS 很酷的透明样式
我們今天這里不重點(diǎn)討論怎么制作帶有透明效果的 .png格式圖片，我們來(lái)討論怎么讓它在網(wǎng)頁(yè)中完美的顯示出它的透明的魅力。
精靈空間不少地方都有很酷的透明效果。(下面附上幾個(gè)截圖效果)。
首頁(yè)
精靈空間
背景音樂(lè)和網(wǎng)頁(yè)收藏
圖片瀏覽和圖片收藏
視頻播放和視頻收藏
如果你對(duì)圖片保存格式有些了解的話，你會(huì)發(fā)現(xiàn) gif圖片是可以保留部分透明效果的，在網(wǎng)頁(yè)中直接使用 gif圖片的話，可以部分透明，但效果并不完美，比如圖片邊沿不整齊，不能半透明等等。實(shí)際上，還有一種網(wǎng)頁(yè)中很常用的 .png格式的圖片可以很完美的保存圖片的透明效果。在 ps中設(shè)計(jì)出來(lái)的各種透明半透明效果，只要你正確的將它保存為 .png格式的話，圖片打開(kāi)的效果幾乎和在 ps中是一樣的，邊沿很光滑，透明度也都一致。我們今天這里不重點(diǎn)討論怎么制作帶有透明效果的 .png格式圖片，我們來(lái)討論怎么讓它在網(wǎng)頁(yè)中完美的顯示出它的透明的魅力。
也許也有朋友嘗試過(guò)要做出一些透明的效果，也有朋友知道 .png圖片可以是有透明效果的，但是怎么一放到網(wǎng)頁(yè)里面，顯示的效果就變味了呢？
事實(shí)上， firefox是可以直接完美的支持 .png圖片的透明效果的。不信朋友們現(xiàn)在就可以試試，在網(wǎng)頁(yè)里面插入任何一個(gè)帶有透明效果的 .png圖片，用 firefox打開(kāi)。
只可惜，現(xiàn)在畢竟還是使用 ie的同志占多數(shù)。偏偏 ie里面不能直接出這種效果。但肯定是有辦法解決的。我們知道 ie是支持濾鏡的。也許不少朋友也知道濾鏡可以做一些很不錯(cuò)的效果出來(lái)，但也許你不是很了解“ AlphaImageLoader ”這個(gè)濾鏡。它起的作用就是在 html dom元素的背景和內(nèi)容之間的導(dǎo)入一層圖片。如果這個(gè)圖片是帶有透明樣式的 .png圖片，它將完美的保留其透明樣式，并且在完全透明的部分，是鼠標(biāo)可穿透的。
我們來(lái)看一個(gè)在 ie里面的完整的透明樣式定義：
background-color : transparent ;
background-image : none ;
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="test.png", sizingMethod="crop") ;
首先，你要把樣式的背景顏色和背景圖片都設(shè)置為沒(méi)有。然后用濾鏡導(dǎo)入一個(gè) .png圖片，原則上就 ok了，其實(shí)也很簡(jiǎn)單。
當(dāng)然我們不能只顧 ie里面如何。一般情況下，我們還需要考慮如何兼容 firefox。上面已經(jīng)說(shuō)過(guò)了，在 firefox里面其實(shí)是可以直接兼容 .png的透明格式的，所以這里更簡(jiǎn)單：
width : 16px ;
height : 42px ;
background : transparent url(images/Red_03.png) no-repeat ;
下面綜合起來(lái)看這個(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è)符號(hào)只有ie可以識(shí)別，熟悉樣式兼容的朋友肯定經(jīng)常用到這個(gè)寫法。那么* html . Transparent在ie里面就將覆蓋或者添加樣式的屬性，實(shí)現(xiàn)透明效果。有興趣的朋友，不防一試。
總結(jié)
以上是生活随笔為你收集整理的html 透明gif,CSS 很酷的透明样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： C语言程序设计教程（第三版）课后习题6.
- 下一篇： CSS 基本样式