在CSS中套用濾鏡

我想這就是為什麼大家都喜歡用Internet Explorer的原因了:延伸性強且效果很炫。今天阿得要帶給您的是幾個很簡單的範例，告訴您如何套用濾鏡在物件上。

STEP1:【前言】我想這就是為什麼大家都喜歡用Internet Explorer的原因了:延伸性強且效果很炫。今天阿得要帶給您的是幾個很簡單的範例，告訴您如何套用濾鏡在物件上。

STEP2:【基本寫法】這是一個簡單的含有濾鏡效果的CSS範例:

.hellobox{
top:10px;
left:100px;
filter:alpha(opacity=65);
background-color:000000;
color:ffcc33;
font-size:11px;
font-family:verdana,arial;
position:absolute;
}

請將以上程式碼插入<style>與</style>中，然後再將以下的程式碼貼到網頁上任何一個地方:

<table width=100 cellspacing=2 cellpadding=2 class=hellobox>
<tr>
<td>
這是一個套用了透明濾鏡的超炫Table
</td>
</tr>
</table>

阿得現在針對以上的兩組程式碼做講解:

top:10px 就是在網頁上的Y座標位置，單位為像素
left:100px在網頁上的X座標位置，單位為像素
filter:alpha(opacity=65);這張就是王牌啦，filter:alpha()是透明濾鏡，而opacity指的是可見度的比例，如現在是可見度為65%，如果您設定為100的時候，代表的就是100%顯現，完全沒有透明
position:absolute...position是位置，absolute代表絕對位置，您跑過就知道了，他會一直停留在該X與Y座標
至於第二組程式碼，其實不過是一個Table做成的物件而已，因為他使用class=hellobox，所以套用了hellobox這個樣式，當然，就有濾鏡效果囉! 剩下的阿得就不講解了，如果剩下的您不了解的話，請參考酷必網其他的CSS教學

STEPe:【結語】就這麼短啊，沒錯!這一節只是一個介紹，告訴您如何套用透明濾鏡，下一章阿得會列出許多可以玩玩看的濾鏡給您..
別忘了，濾鏡可以套用很多個喔! 您以後可以不用羨慕人家的網頁有漂亮的半透明小視窗，慢慢的，您就可以自己寫了!
這些濾鏡與CSS配合以後可以更方便的使用和管理，除了這些靜態的濾鏡，還有轉換濾鏡可以使用，什麼是轉換濾鏡呢?
下次再跟您介紹囉!

最後更新日期: 11/4/2001 3:11:05 PM