用CSS實(shí)現(xiàn)像vista一樣很酷的透明效果

2020-03-24 17:46:43

字體：大中小

供稿：網(wǎng)友

如果你對(duì)圖片保存格式有些了解的話，你會(huì)發(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/transparent.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è)符號(hào)只有ie可以識(shí)別，熟悉樣式兼容的朋友肯定經(jīng)常用到這個(gè)寫法。那么* html . Transparent在ie里面就將覆蓋或者添加樣式的屬性，實(shí)現(xiàn)透明效果。有興趣的朋友，不防一試。下面是用這種方法實(shí)現(xiàn)的透明效果的幾個(gè)截圖：首頁html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：在css里div怎么垂直居中

下一篇：使用css3 屬性如何豐富圖片樣式(圓角陰影漸變)