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

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

　　上面的三種效果除“Style”參數(shù)不同外，其它參數(shù)均相同。圖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”濾鏡時(shí)要注意：
　　1、由于“Alpha”濾鏡使當(dāng)前元素部分透明，該元素下層的內(nèi)容的顏色對(duì)整個(gè)效果起著重要作用，因此顏色的合理搭配相當(dāng)重要；
　　2、透明度的大小要根據(jù)具體情況仔細(xì)調(diào)整，取一個(gè)最佳值。

二、新穎別致的跑馬燈
　　跑馬燈特效在現(xiàn)在的網(wǎng)站已司空見(jiàn)慣了，但象下面這樣淡入淡出的跑馬燈還不多，請(qǐng)看下圖：

　　圖4　別致的跑馬燈

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

三、仿電視效果
　　請(qǐng)下面的效果圖：
　
　　圖5、6　仿電視效果

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

總結(jié)

以上是生活随笔為你收集整理的巧用CSS的alpha滤镜的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。