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

1、<p>　　CSS濾鏡在網(wǎng)頁設(shè)計中的應(yīng)用</p><p>　　摘要：介紹了CSS濾鏡的語法。對幾種常用CSS濾鏡的主要屬性進行了分析，并給出相應(yīng)實例論述。CSS濾鏡可以像圖像軟件一樣處理頁面中的文字和圖像，使網(wǎng)頁變得更加生動?？刂茷V鏡的參數(shù)來產(chǎn)生動態(tài)效果，使網(wǎng)頁變得更加生動。 </p><p>　　關(guān)鍵詞：Alpha Dropshadow Shadow </p>&

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

3、S濾鏡的概念 </p><p>　　濾鏡（filter）是CSS技術(shù)的一種應(yīng)用，它可以用來改變圖形和文字的外觀，以增加圖形的視覺效果。濾鏡分為視覺濾鏡visualfilters和轉(zhuǎn)換濾鏡transitionfilters兩大類。視覺濾鏡只可以達到靜態(tài)的特效效果，只需在網(wǎng)頁內(nèi)使用CSS的定義語法，即可將此濾鏡效果加到網(wǎng)頁內(nèi)。轉(zhuǎn)換濾鏡是用于兩個畫面進行轉(zhuǎn)換時所使用的特效，將產(chǎn)生動態(tài)效果，除了在網(wǎng)頁中利用CSS的定義語

4、法外，還必須配合script語言，及事件的概念，才能自如地使用轉(zhuǎn)換濾鏡，產(chǎn)生絢麗的效果。 </p><p><b>　　2 濾鏡的格式 </b></p><p>　　濾鏡不是一種軟件，只是CSS的一種擴展功能，因此使用時需要在CSS樣式表里添加特定的參數(shù)，然后再對對象應(yīng)用設(shè)置好的CSS樣式，從而讓濾鏡效果得以實現(xiàn)。濾鏡的具體類別很多，但是大部分格式是相同的。具體格式為

5、：filter：；濾鏡名稱（參數(shù)1=，參數(shù)2=……） </p><p>　　3 濾鏡的具體應(yīng)用 </p><p>　　3.1 Alpha濾鏡 ①格式：filter：Alpha（Opacity=？，F(xiàn)inishOpacity=？，Style=？，StartX=？，StartY=？，F(xiàn)inishX=？，F(xiàn)i-nishY=？）。②作用：用來設(shè)置對象的透明度。③參數(shù)詳解：透明度程度、可選的參數(shù)、透

6、明區(qū)域的形狀特征、漸變透明效果的開始坐標(biāo)、漸變透明效果的結(jié)束坐標(biāo)。④操作過程：在網(wǎng)頁中插入圖片，如圖1所示，用于效果對比；建立sty1的樣式，代碼如下： </p><p><b>　　■。 </b></p><p>　　代碼效果如圖2所示： </p><p><b>　　■ </b></p><p>

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

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

9、;p><b>　　■。 </b></p><p>　　代碼效果如圖4所示。 </p><p>　　3.4 其余的各類濾鏡 ①BlendTrans：圖像之間的淡入和淡出的效果。格式：BlendTrans（Duration=？）。參數(shù)代表淡入或淡出的時間。②Blru：建立模糊效果。格式：Blur（Add=？，Direction=？，Strength=？）。參數(shù)分別代

10、表：是否單方向模糊、設(shè)置模糊的方向、代表模糊的象素值。③Chroma：把指定的顏色設(shè)置為透明。格式：Chroma（Color=？）。參數(shù)代表透明的顏色。④FlipH：將元素水平反轉(zhuǎn)。⑤FlipV：將元素垂直反轉(zhuǎn)。⑥Glow：建立外發(fā)光效果。格式：Glow（Color=？，Strength=？）參數(shù)代表指定發(fā)光的顏色和代表光的強度。⑦Gray：去掉圖像的色彩，顯示為黑白圖象。⑧Invert：反轉(zhuǎn)圖像的顏色，產(chǎn)生類似底片的效果。⑨Light

11、：放置光源的效果，可以用來模擬光源在物體上的投影效果。⑩.Mask：建立透明遮罩。格式：Mask（Color=？）。參數(shù)是對底色進行設(shè)置?！鯮eveal Trans：建立切換效果。格式：Reveal Trans（Duration=？，Transition=？）。參數(shù)分別代表：代表切換時間、切換</p><p>　　ngth=？）。參數(shù)分別代表：是否顯示原對象、波動的個數(shù)、波浪效果的光照強度、波浪的起始相角和波浪搖

12、擺的幅度?！鯴ray：顯現(xiàn)圖片的輪廓，X光片效果。 </p><p><b>　　4 結(jié)束語 </b></p><p>　　濾鏡的使用大大減少了網(wǎng)頁設(shè)計的時間，增強了網(wǎng)頁的顯示效果，設(shè)計者可以通過濾鏡對網(wǎng)頁中的元素進行精確化控制，從而達到滿意的效果。 </p><p><b>　　參考文獻： </b></p>

13、<p>　　[1]楊森香.網(wǎng)頁設(shè)計案例教程[M].北京出版社，2010. </p><p>　　[2]周文化，css濾鏡在網(wǎng)頁中的使用[J].常州輕工職業(yè)學(xué)院學(xué)報，1999（1）29-31. </p><p>　　[3]劉敏娜.探討XHTML設(shè)計標(biāo)準(zhǔn)下CSS+DIV布局技術(shù)[J].價值工程，2012（06）. </p><p>　　作者簡介：劉曉榮（19