巧用CSS的alpha濾鏡

把「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 ；

3、在**中插入乙個跑馬燈，並在跑馬燈中加入alpha濾鏡，結束！這裡要注意的是不要把「alpha」濾鏡載入到< td >上，而是要載入到跑馬燈上，否則效果將在相徑庭了。按f12看看吧。

若你手頭沒有跑馬燈程式，我這裡給出乙個，省得你到處找，煩著呢！

< marquee border="0" class="alpha2" >跑馬燈內容< /marquee >

三、仿電視效果

請下面的效果圖：

圖5、6　仿電視效果

由於該效果是動態的，上面是我抓的兩張過程。製作方法如下：

1、插入乙個1*1的**，並用一張作為**的背景。

2、我們把單元格的背景設定為白色，並在**的單元格上載入乙個alpha濾鏡，濾鏡**為：.alpha1 ，這裡濾鏡的其它引數取預設值。

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中圖層使用絕對座標帶來的定位不准的問題。