| 從IE 4.0版開始，就提供了一些內建的多媒體濾鏡特效，正是由於這些基於CSS的樣式屬性的控制，於是我們在編寫網頁的時候，即使我們不用圖片，也可以使我們的文字，圖片，按鈕或是DIV標識鮮豔無比，充滿生氣，從而為自己的網頁增加了比較美妙的視覺效果。 下面，我們就來看看CSS的Filter樣式。這裡，即使你沒有CSS這方面的知識，相信以下的內容也不會很難懂的。當然，首先，我預設你已經學過HTML，並且還能做網頁，最好是還知道一點Scripts語句。由於各種瀏覽器對CSS的支援的原因，我建議你使用IE4.0以上版的瀏覽器，強烈建議你使用IE5.0版，這樣，你就會毫不費力地看到所有的特效。 好吧，閑話少說，我們開始吧。 一、建立Filter樣式 Filter既然是CSS樣式表中的一員，那麼它就可以像其它樣式的定義和應用方式一樣，可能直接定義在職HTML標識的<head>和</head>只間。其文法結構為： filter：名稱(參數及其值) 例如：imgblur { filter : Blur( strength=30 ) } 當然，它也可以通過Style標識定義在HTML的標識裡面，如： <Image ID=test SRC="test.gif" Style="Filter : Blur( Strength=30 )"> 以上就是使用CSS中filter樣式的使用方法，其實這和其它CSS的樣式定義方式一樣，分為外部參考、內部引用和局部引用三種，上面的第一種是內部引用，第二種是局部引用，外部參考則要先建立一個CSS的檔案，然後用<link rel=StyleSheet type="text/css" href="樣式檔案的URL">來嵌入HTML檔案。有關CSS的定義方式，請大家參考網頁陶吧裡的相關文章。 Filter樣式屬性允許一次設定多個濾鏡效果，也就是說，可以讓一個HTML的元件同時擁有多個濾鏡的的效果。例如：
…… ……
<img id=image1 src="test.jpg" border="0">
<img id=image2 src="test.jpg" border="0" style="filter : blur ( Strength=30 ) flipv()">
…… …… 在以上的例子中，ID為image1的圖片是正常顯示的圖片，而ID為image2的圖片則同時應用了模糊（Blur）和上下顛倒（Filpv）兩種濾鏡。以下是同一圖片的兩種效果：（得用IE4.0以上版的瀏覽器瀏覽）
-
怎麼樣，還行吧，這裡要請大家注意幾點: 1、如果使用多的濾鏡，那麼濾鏡間要以空格分開。 例如： <img src="test.jpg" style="Filter: alpha(opacity=30) Blur(amount=10)"> 2、一個濾鏡中的若干參數以逗號分隔。 例如： <img src="test.jpg" style="filter : blur(amount=30,strength=50)"> 3、Filter和其他的CSS樣式則以分號分開。 例如： <img src="test.jpg" style="filter: blur(amount=30) ; Position: relative"> 接著，我們來看看Filter到底有哪些濾鏡。 二、靜態濾鏡的種類 視覺效果的濾鏡。在IE4.0以上版中，支援以下14種濾鏡：
| 濾鏡名 |
說明 |
Alpha |
讓HTML元件呈現出透明的漸進效果 |
Blur |
讓HTML元件產生風吹模糊的效果 |
Chroma |
讓映像中的某一顏色變成透明色 |
DropShadow |
讓HTML元件有一個下落式的陰影 |
FlipH |
讓HTML元件水平翻轉 |
FlipV |
讓HTML元件垂直翻轉 |
Glow |
在元件的周圍產生光暈而模糊的效果 |
Gray |
把一個彩色的圖片變成黑白色 |
Invert |
產生圖片的照片底片的效果 |
Light |
在HTML元件上放置一個光影 |
Mask |
利用另一個HTML元件在另一個元件上產生映像的遮罩 |
Shadow |
產生一個比較立體的陰影 |
Wave |
讓HTML元件產生水平或是垂直方向上的波浪變形 |
XRay |
產生HTML元件的輪廓，就像是照X光一樣 |
這些濾鏡就像是PhotoShop這一類影像處理軟體所提供的特效一樣，有了這些特效，你就可以直接在HTML中對圖片進行特效處理了，而不用再用專門的圖片處理軟體編輯圖片了。一般而言，用得最多的是圖片和文字。那麼，就讓我們來看看各個濾鏡中有些什麼樣的參數和效果。 三、Alpha 濾鏡
參數名 |
說明 |
取值說明 |
Opacity |
不透明的程度，百分比。 |
從0到100，0表是完全透明，100表示完全不透明。 |
FinishOpacity |
這是一個同Opacity一起使用的選擇性的參數，當同時設定Opacity和FinishOpacity時，可以製作出透明漸進的效果，比較酷。 |
從0到100，0表是完全透明，100表示完全不透明。 |
Style |
當同時設定了Opacity和finishOpacity產生透明漸進時，它主要是用赤指定漸進的顯示形狀。 |
0：沒有漸進；1：直線漸進；
2：圓形漸進；3：矩形輻射。 |
StartX |
漸進開始的 X 座標值 |
|
StartY |
漸進開始的 Y 座標值 |
|
FinishX |
漸進結束的 X 座標值 |
|
FinishY |
漸進結束的 Y 座標值 |
|
看一下下面的示範，你就知道了： <table>
<tr>
<td>原圖</td>
<td>Style=0</td>
<td>Style=1</td>
<td>Style=2</td>
<td>Style=3</td
<tr></tr>
<td><img src="test.jpg"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=0"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=1"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=2"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=3"></td>
</tr>
</table>
|
