作者：馮永曜
“Alpha”濾鏡，聽到這個名字，你可能會想到Flash里有，Photoshop里也似乎見過。一點不錯，它們的作用基本類似，就是把一個目標元素與背景混合。你可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定坐標，可以指定點、線、面的透明度。由于“Alpha”濾鏡的參數比較多，所以我們先來了解釋一下參數，各參數含義分別如下：
　　“opacity”：代表透明度水準。范圍是從0~100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
　　“finishopacity”：是一個可選參數，如果想要設置漸變的透明效果，就可以使用他們來指定結束時的透明度。范圍也是0 到 100。
　　“style”：指定了透明區域的形狀特征。其中0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。
　　“StartX”和“StartY”：代表漸變透明效果的開始X和Y坐標。
　　“FinishX”和“FinishY”：代表漸變透明效果結束X和Y 的坐標。
　　好了，講了一堆參數，我們來做幾個實例試試：

一、特殊的文字效果
　　把“Alpha”濾鏡加載到文字所在的< td >上，能產生一些奇妙的效果，請看下圖：
圖1
圖2
圖3

　　上面的三種效果除“Style”參數不同外，其它參數均相同。圖1的代碼是： Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)；
　　圖2的濾鏡代碼為：Alpha(Opacity=10, FinishOpacity=90, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)；
　　圖3的濾鏡代碼為：Alpha(Opacity=10, FinishOpacity=90, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100)；
　　在使用“Alpha”濾鏡時要注意：
　　1、由于“Alpha”濾鏡使當前元素部分透明，該元素下層的內容的顏色對整個效果起著重要作用，因此顏色的合理搭配相當重要；
　　2、透明度的大小要根據具體情況仔細調整，取一個最佳值。

二、新穎別致的跑馬燈
　　跑馬燈特效在現在的網站已司空見慣了，但象下面這樣淡入淡出的跑馬燈還不多，請看下圖：

　　圖4　別致的跑馬燈

　　用“Alpha”濾鏡你也可以輕松地做出上面那種效果的跑馬燈。具體制作方法如下：
　　1、插入一個一行一列的表格，把表格的背景設置為“#000000”；
　　2、在DW3中設置好alpha濾鏡，具體的濾鏡代碼是：.alpha1 { filter: Alpha(Opacity=100, FinishOpacity=20, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)}；
　　3、在表格中插入一個跑馬燈，并在跑馬燈中加入alpha濾鏡，結束！這里要注意的是不要把“Alpha”濾鏡加載到< td >上，而是要加載到跑馬燈上，否則效果將在相徑庭了。按F12看看吧。
　　若你手頭沒有跑馬燈程序，我這里給出一個，省得你到處找，煩著呢！
< marquee border="0" class="alpha2" >跑馬燈內容< /marquee >

三、仿電視效果
　　請下面的效果圖：
　
　　圖5、6　仿電視效果

　　由于該效果是動態的，上面是我抓的兩張過程圖片。制作方法如下：
　　1、插入一個1*1的表格，并用一張圖片作為表格的背景。
　　2、我們把單元格的背景設置為白色，并在表格的單元格上加載一個alpha濾鏡，濾鏡代碼為：.alpha1 {filter:alpha(opacity=50) }，這里濾鏡的其它參數取默認值。
　　3、用鼠標在表格的單元格中點一下，然后點擊主菜單的“Insert”，并在其下拉出的菜單中選擇“Layer”子菜單，插入一個層（我們稱其為：layer1）。我們再次點擊主菜單的“Insert”，并在其下拉出的菜單中選擇“Layer”子菜單，再插入一個層（我們稱其為：layer2）。
　　4、我們稱Layer1為Layer2的父層，那么Layer2就是Layer1的子層，注意：切不可用鼠標拖動Layer1。把Layer1的Width和Height均設置為“1”。把Layer2拖到表格上，并調整其大小與表格完全重合。
　　5、在Layer2上插入一個“ Marquee”（滾動字幕），按F12就能看到象上圖那樣的效果了。
　　本例的alpha濾鏡使得背景圖片看起來象被蒙上了一層薄紗，從而使得在其上面的文字能突出顯示，這也是在電視中經?？吹降男Ч?。另外也請你注意一下3、4兩步插入圖層的技巧，這樣插入的圖層，無論你在其前后插入多少內容，它與背景圖片的相對位置不變，它克服了在DW3中圖層使用絕對坐標帶來的定位不準的問題。

總結

以上是生活随笔為你收集整理的巧用CSS的alpha滤镜的全部內容，希望文章能夠幫你解決所遇到的問題。

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