css濾鏡在網頁設計中的應用

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

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

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

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

5、：filter：；濾鏡名稱（參數1=，參數2=……） </p><p>　　3 濾鏡的具體應用 </p><p>　　3.1 Alpha濾鏡 ①格式：filter：Alpha（Opacity=？，FinishOpacity=？，Style=？，StartX=？，StartY=？，FinishX=？，Fi-nishY=？）。②作用：用來設置對象的透明度。③參數詳解：透明度程度、可選的參數、透

6、明區(qū)域的形狀特征、漸變透明效果的開始坐標、漸變透明效果的結束坐標。④操作過程：在網頁中插入圖片，如圖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=？）。②作用：用來添加陰影效果。③參數詳解：分別代表：指定陰影的顏色、相對于元素在水平方向偏移量、相對于元素在垂直方向偏移量、布爾值。④操作過程：建立做sty2的樣式，代碼如下：■。 </

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

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

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

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

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

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