CSS濾鏡在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

摘要：介紹了CSS濾鏡的語(yǔ)法。對(duì)幾種常用CSS濾鏡的主要屬性進(jìn)行了分析，并給出相應(yīng)實(shí)例論述。CSS濾鏡可以像圖像軟件一樣處理頁(yè)面中的文字和圖像，使網(wǎng)頁(yè)變得更加生動(dòng)。控制濾鏡的參數(shù)來產(chǎn)生動(dòng)態(tài)效果，使網(wǎng)頁(yè)變得更加生動(dòng)。

關(guān)鍵詞：Alpha Dropshadow Shadow

一提起濾鏡，大家都會(huì)想起Adobe公司的Photoshop軟件，濾鏡在Photoshop中具有非常神奇的作用，一般都按照分類放置在菜單中，使用時(shí)只需從該菜單中執(zhí)行這項(xiàng)命令即可達(dá)到美妙的效果。但是真正用起來卻很難做到恰到好處。因?yàn)镻hotoshop里的濾鏡除了平常的美術(shù)功底之外，通常需要同通道、圖層等聯(lián)合使用，需要用戶對(duì)濾鏡熟悉的操控，甚至需要具有很豐富的想象力。

1 CSS濾鏡的概念

濾鏡（filter）是CSS技術(shù)的一種應(yīng)用，它可以用來改變圖形和文字的外觀，以增加圖形的視覺效果。濾鏡分為視覺濾鏡visualfilters和轉(zhuǎn)換濾鏡transitionfilters兩大類。視覺濾鏡只可以達(dá)到靜態(tài)的特效效果，只需在網(wǎng)頁(yè)內(nèi)使用CSS的定義語(yǔ)法，即可將此濾鏡效果加到網(wǎng)頁(yè)內(nèi)。轉(zhuǎn)換濾鏡是用于兩個(gè)畫面進(jìn)行轉(zhuǎn)換時(shí)所使用的特效，將產(chǎn)生動(dòng)態(tài)效果，除了在網(wǎng)頁(yè)中利用CSS的定義語(yǔ)法外，還必須配合script語(yǔ)言，及事件的概念，才能自如地使用轉(zhuǎn)換濾鏡，產(chǎn)生絢麗的效果。

2 濾鏡的格式

濾鏡不是一種軟件，只是CSS的一種擴(kuò)展功能，因此使用時(shí)需要在CSS樣式表里添加特定的參數(shù)，然后再對(duì)對(duì)象應(yīng)用設(shè)置好的CSS樣式，從而讓濾鏡效果得以實(shí)現(xiàn)。濾鏡的具體類別很多，但是大部分格式是相同的。具體格式為：filter：；濾鏡名稱（參數(shù)1=，參數(shù)2=……）

3 濾鏡的具體應(yīng)用

3.1 Alpha濾鏡 ①格式：filter：Alpha（Opacity=？，F(xiàn)inishOpacity=？，Style=？，StartX=？，StartY=？，F(xiàn)inishX=？，F(xiàn)i-nishY=？）。②作用：用來設(shè)置對(duì)象的透明度。③參數(shù)詳解：透明度程度、可選的參數(shù)、透明區(qū)域的形狀特征、漸變透明效果的開始坐標(biāo)、漸變透明效果的結(jié)束坐標(biāo)。④操作過程：在網(wǎng)頁(yè)中插入圖片，如圖1所示，用于效果對(duì)比；建立sty1的樣式，代碼如下：

■。

代碼效果如圖2所示：

■

圖1 圖2

3.2 Dropshadow濾鏡 ①格式：filter：DropShadow（Color=？，OffX=？，OffY=-？，Posit-ive=？）。②作用：用來添加陰影效果。③參數(shù)詳解：分別代表：指定陰影的顏色、相對(duì)于元素在水平方向偏移量、相對(duì)于元素在垂直方向偏移量、布爾值。④操作過程：建立做sty2的樣式，代碼如下：■。

代碼效果如圖3所示：

■

3.3 Shadow濾鏡 ①格式：filter：Shadow（Color=？，Direct-ion=？）②作用：用來添加陰影效果。③參數(shù)詳解：指定陰影的顏色和設(shè)置投影的方向。④操作過程：建立sty3的樣式，代碼如下：

■。

代碼效果如圖4所示。

3.4 其余的各類濾鏡 ①BlendTrans：圖像之間的淡入和淡出的效果。格式：BlendTrans（Duration=？）。參數(shù)代表淡入或淡出的時(shí)間。②Blru：建立模糊效果。格式：Blur（Add=？，Direction=？，Strength=？）。參數(shù)分別代表：是否單方向模糊、設(shè)置模糊的方向、代表模糊的象素值。③Chroma：把指定的顏色設(shè)置為透明。格式：Chroma（Color=？）。參數(shù)代表透明的顏色。④FlipH：將元素水平反轉(zhuǎn)。⑤FlipV：將元素垂直反轉(zhuǎn)。⑥Glow：建立外發(fā)光效果。格式：Glow（Color=？，Strength=？）參數(shù)代表指定發(fā)光的顏色和代表光的強(qiáng)度。⑦Gray：去掉圖像的色彩，顯示為黑白圖象。⑧Invert：反轉(zhuǎn)圖像的顏色，產(chǎn)生類似底片的效果。⑨Light：放置光源的效果，可以用來模擬光源在物體上的投影效果。⑩.Mask：建立透明遮罩。格式：Mask（Color=？）。參數(shù)是對(duì)底色進(jìn)行設(shè)置?！鯮eveal Trans：建立切換效果。格式：Reveal Trans（Duration=？，Transition=？）。參數(shù)分別代表：代表切換時(shí)間、切換方式?！鯳ave：波紋效果。格式：Wave（Add=？，F(xiàn)req=？，Light Strength=？，Phase=？，Stre-

ngth=？）。參數(shù)分別代表：是否顯示原對(duì)象、波動(dòng)的個(gè)數(shù)、波浪效果的光照強(qiáng)度、波浪的起始相角和波浪搖擺的幅度?！鯴ray：顯現(xiàn)圖片的輪廓，X光片效果。

4 結(jié)束語(yǔ)

濾鏡的使用大大減少了網(wǎng)頁(yè)設(shè)計(jì)的時(shí)間，增強(qiáng)了網(wǎng)頁(yè)的顯示效果，設(shè)計(jì)者可以通過濾鏡對(duì)網(wǎng)頁(yè)中的元素進(jìn)行精確化控制，從而達(dá)到滿意的效果。

參考文獻(xiàn)：

[1]楊森香.網(wǎng)頁(yè)設(shè)計(jì)案例教程[M].北京出版社，2010.

[2]周文化，css濾鏡在網(wǎng)頁(yè)中的使用[J].常州輕工職業(yè)學(xué)院學(xué)報(bào)，1999（1）29-31.

[3]劉敏娜.探討XHTML設(shè)計(jì)標(biāo)準(zhǔn)下CSS+DIV布局技術(shù)[J].價(jià)值工程，2012（06）.

作者簡(jiǎn)介：劉曉榮（1980-），女，甘肅人，講師，主要從事計(jì)算機(jī)教學(xué)工作。