我們今天這里不重點討論怎么制作帶有透明效果的 .png格式圖片，我們來討論怎么讓它在網頁中完美的顯示出它的透明的魅力。

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

首頁

精靈空間

背景音樂和網頁收藏

圖片瀏覽和圖片收藏

視頻播放和視頻收藏

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

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

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

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

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

background-color : transparent ;

background-image : none ;

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

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

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

width : 16px ;

height : 42px ;

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

下面綜合起來看這個兼容的樣式應該怎么寫：

. 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這個樣式本身就是兼容firefox的。而后面的* html這個符號只有ie可以識別，熟悉樣式兼容的朋友肯定經常用到這個寫法。那么* html . Transparent在ie里面就將覆蓋或者添加樣式的屬性，實現透明效果。有興趣的朋友，不防一試。

總結

以上是生活随笔為你收集整理的html 透明gif,CSS 很酷的透明样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。