五、CSS濾鏡

發布時間：2007年02月06日浏覽次數：2902 次

1、概述
　　好了，下(xià)面我(wǒ)(wǒ)們将進入CSS的最精彩的部分(fēn)--濾鏡，它将把我(wǒ)(wǒ)們帶入絢麗多姿的多媒體(tǐ)世界。正是有了濾鏡屬性，頁面才變得更加漂亮。
　　CSS的濾鏡屬性的标識符是filter。爲了使您對它有個整體(tǐ)的印象，我(wǒ)(wǒ)們先來看一(yī)下(xià)它的書(shū)寫格式：
　　 filter：filtername（parameters）
　　怎麽樣？是不是很簡單，看上去(qù)與前面講的屬性定義沒什麽太大(dà)的差别。Filter是濾鏡屬性選擇符。
　　也就是說，隻要您進行濾鏡操作，就必須先定義filter；filtername是濾鏡屬性名，這裏包括alpha、blur、chroma等等多種屬性，詳細内容請看下(xià)表：

　　上面filter表達式中(zhōng)括号内的parameters是表示各個濾鏡屬性的參數，也正是這些參數決定了濾鏡将以怎樣的效果顯示。
　　看了上面長長的列表，是不是覺得很困難呀？不要緊，我(wǒ)(wǒ)們接下(xià)來一(yī)個一(yī)個的介紹這些屬性在CSS中(zhōng)是怎樣實現的（很簡單喲^_^）。
　　下(xià)一(yī)節我(wǒ)(wǒ)們将首先學習Alpha透明屬性的應用。
　2、alpha屬性
　　alpha是來設置透明度的。先來看一(yī)下(xià)它的表達格式：
　　filter：alpha（opacity=opcity，finishopacity=finishopacity，
　　style=style，startX=startX，startY=startY，finishX=finishX，
　　finishY=finishY）
　　哇，怎麽這麽長。是啊，不過這些參數都各有其用。
　　Opacity代表透明度等級，可選值從0到100，0代表完全透明，100代表完全不透明。 Style參數指定了透明區域的形狀特征。其中(zhōng)0代表統一(yī)形狀；1代表線形；2代表放(fàng)射狀；3代表長方形。
　　Finishopacity是一(yī)個可選項，用來設置結束時的透明度，從而達到一(yī)種漸變效果，它的值也是從0到100。 StartX和StartY代表漸變透明效果的開(kāi)始坐标，finishX和finishY代表漸變透明效果的結束坐标。
　　從上面講的我(wǒ)(wǒ)們可以看出，如果不設置透明漸變效果，那麽隻需設置opacity這一(yī)個參數就可以了。說了這麽多，我(wǒ)(wǒ)們來看一(yī)個實例吧（見下(xià)圖）：
　　實現上面這種效果的代碼如下(xià)：
　　<html>
　　<head>
　　<title>alpha</title>
　　<style>//*定義CSS樣式*//
　　
　　</style>
　　</head>
　　<body>
　　<div>
　　<p style=“font-size：48；font-weight：bold；color：red；”>
　　Beautiful </p>//*定義字體(tǐ)屬性，前景色爲紅色*//
　　</div>
　　<p><img src=“ss01076.jpg”> </p>
　　//*導入一(yī)張圖片*//
　　</body>
　　</html>
　　如果在上面的代碼中(zhōng)稍做改動，則将産生(shēng)另外(wài)多種效果。我(wǒ)(wǒ)們隻修改img的樣式屬性，把head中(zhōng)的Img樣式屬性代碼改爲如下(xià)所示：
　　img{position：absolute；top：20；left：40；
　　filter：alpha(opacity=0,finishopacity=100,
　　style=1,startx=0,starty=85,finishx=150,finishy=85);}
　 //*設置透明漸變效果，起始坐标，終止漸變坐标，并設置透明樣式值（style=1）爲　　　線形*//
　　這段代碼産生(shēng)的效果如左下(xià)圖所示，右面的兩幅圖分(fēn)别是把Alpha中(zhōng)的Style參數值爲2和3後的效果，點擊縮略圖可放(fàng)大(dà)。
　　
　　　　　　Style=1　　　　　　　　Style=2　　　　　　　　Style=3
　　以上是CSS的Alpha濾鏡屬性的應用，具體(tǐ)應用還需要您自己找個例子練一(yī)練。
　　下(xià)一(yī)節我(wǒ)(wǒ)們将介紹blur（模糊）屬性。
　3、blur屬性
　　假如您用手在一(yī)幅還沒幹透的油畫上迅速劃過，畫面就會變得模糊。CSS下(xià)的blur屬性就會達到這種模糊的效果。
　　先來看一(yī)下(xià)blur屬性的表達式：
　　filter：blur（add=add，direction，strength=strength）
　　我(wǒ)(wǒ)們看到blur屬性有三個參數：add、direction、strength。
　　Add參數有兩個參數值：true和false。意思是指定圖片是否被改變成模糊效果。　　　Direction參數用來設置模糊的方向。模糊效果是按照順時針方向進行的。其中(zhōng)0度代表垂直向上，每45度一(yī)個單位，默認值是向左的270度。角度方向的對應關系見下(xià)表：

　　Strength參數值隻能使用整數來指定，它代表有多少像素的寬度将受到模糊影響。默認值是5像素。
　　還是看一(yī)個例子吧。點擊這裏看效果　
　　看起來是不是有些像萬花筒，在這個例子中(zhōng)加入了一(yī)些JavaScript的語句，代碼如下(xià)：
　　<html>
　　　<head>
　　　<title>blur css</title>
　　　<script>
　　　function handlechange(obj)
　　　//*設置一(yī)個循環函數handlechange，對象是obj*//
　　　{ with(obj.filters(0))//*Obj的filter屬性*//
　　　 { if (strength<255)//*設置循環條件*//
　　　　 { strength +=1；direction +=45；}
　　　　//*每循環一(yī)次strength就加1，direction加45度*// 　　　　　　　
　　　 }
　　　}
　　　</script>
　　　</head>
　　　<body>
　　　<p><img id =“img1” src=“ss01087.jpg” 　　　　　　　　
　　　　　style=“filter：blur(strength=1)”
　　　　　onfilterchange=“handlechange(this)”>
　　　//*導入一(yī)幅圖片，初始blur屬性strength等于1，同時調用onfilterchange函
　　　數*//
　　　</p>
　　　 </body>
　　</html>
　　注：在javascript中(zhōng)blur屬性是這樣定義的：
　　　　[oBlurfilter=] object.Filters.blur
　　這個例子是Blur屬性的一(yī)個比較複雜(zá)的例子，下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹兩個較簡單的blur屬性效果。
　4、Chroma屬性
　　Chroma屬性可以設置一(yī)個對象中(zhōng)指定的顔色爲透明色，它的表達式如下(xià)：
　　Filter：Chroma（color=color）
　　這個屬性的表達式是不是很簡單，它隻有一(yī)個參數。隻需把您想要指定透明的顔色用Color參數設置出來就可以了。比如下(xià)面這幅圖：
　　圖中(zhōng)顯示兩種字體(tǐ)，兩種顔色，我(wǒ)(wǒ)們現在對“leaves”字體(tǐ)添加chroma屬性，使其透明。代碼如下(xià)：
　　<html>
　　　<head>
　　　<title>chroma filter</title>
　　　<style>
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p>LEAVES <em>LOVE</em></p>
　　　</div>
　　　</body>
　　</html>
　　通過上面代碼中(zhōng)對chroma的屬性設置，使綠色透明。顯示效果如下(xià)圖：

　　我(wǒ)(wǒ)們看到綠色的leaves字體(tǐ)不見了，實際上它是透明了，在IE下(xià)點擊它所在的區域，它還是會顯示出來（見下(xià)圖）：
　　另外(wài)，需要注意的是，chroma屬性對于圖片文件不是很适合。因爲很多圖片是經過了減色和壓縮處理（比如JPG、GIF等格式），所以它們很少有固定的位置可以設置爲透明。
　　本節我(wǒ)(wǒ)們講述了chroma屬性的應用，下(xià)一(yī)節将向您介紹Dropshadow屬性。
5、DropShadow屬性
　　DropShadow屬性是爲了添加對象的陰影效果的。它實現的效果看上去(qù)就像使原來的對象離(lí)開(kāi)頁面，然後在頁面上顯示出該對象的投影。看一(yī)看它的表達式：
　　Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，
　　　　　　　　　　　　Positive=positive）
　　該屬性一(yī)共有四個參數： Color代表投射陰影的顔色。 Offx和offy分(fēn)别X方向和Y方向陰影的偏移量。偏移量必須用整數值來設置。如果設置爲正整數，代表X軸的右方向和Y軸的向下(xià)方向。設置爲負整數則相反。
　　Positive參數有兩個值：True爲任何非透明像素建立可見的投影，False爲透明的像素部分(fēn)建立可見的投影。
　　同樣，我(wǒ)(wǒ)們先來看一(yī)個例子（見下(xià)圖）：
　　看，圖中(zhōng)的文字就像是從頁面上飛出來一(yī)樣，并且留下(xià)了一(yī)層淡淡的影子。
　　實際上在這裏應用的就是CSS的DropShadow屬性，我(wǒ)(wǒ)們來看一(yī)下(xià)它的代碼：
　　<html>
　　　<head>
　　　<title>dropshadow </title>
　　　<style>//*定義CSS樣式*//
　　　
　　　//*定義DIV範圍内的樣式，絕對定位，投影的顔色爲#FFCCFF，
　　　投影坐标爲向右偏移15個像素，向下(xià)偏移10個像素*//
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p style=“font-family：matisse itc；font-size：64；
　　　　　　　　font-weight：bold；color：#CC00CC；”>
　　　//*定義字體(tǐ)名稱、大(dà)小(xiǎo)、粗細、顔色*//
　　　Love Leaf </p>
　　 </div>
　　 </body>
　　 </html>
　　和chroma屬性一(yī)樣，Dropshadow屬性對圖象的支持不好，我(wǒ)(wǒ)指的是JPEG、GIF格式的圖象文件。
　　不能支持的原因與Chroma一(yī)樣，因爲這種圖象的顔色很豐富，很難找到一(yī)個投射陰影的位置。
　　本節講述了Dropshadow屬性的應用，下(xià)一(yī)節将向您介紹FlipH、FlipV的屬性應用。
　6、FlipH、FlipV屬性
　　Flip是CSS濾鏡的翻轉屬性，FlipH代表水平翻轉，FlipV代表垂直翻轉。它們的表達式很簡單，分(fēn)别是：
　　Filter：FlipH
　　Filter：FlipV
　　我(wǒ)(wǒ)們先來看一(yī)幅圖：點擊可放(fàng)大(dà)

　　下(xià)面我(wǒ)(wǒ)們分(fēn)别對它實現水平翻轉和垂直翻轉，并且在圖片上方的一(yī)段文字，也發生(shēng)翻轉。代碼如下(xià)：
　　<html>
　　　<head>
　　　<title>flip css</title>
　　　<style>//*設置CSS樣式開(kāi)始*//
　　　
　　 </style>
　　 </head>
　　　<body>
　　　<div>
　　　<p style=“font-family：bailey；font-size：36pt；
　　　　　　　　　font-weight：bold； color：rgb(10,128,156)；”>
　　　 Leaf Village </p>
　　 //*定義字體(tǐ)名稱、大(dà)小(xiǎo)、粗細、顔色*//
　　 </div>
　　 <p><img src=“ss05058.jpg”></p>
　　 //*導入一(yī)張圖片*//
　　 </body>
　　</html>
　　代碼産生(shēng)的兩個效果分(fēn)别如下(xià)圖：（點擊可以放(fàng)大(dà)）
　　　　　　　　　　　　　
　　　　　　　　水平翻轉　　　　　　　　　　　　　　　　垂直翻轉
　　翻轉的屬性應用是不是很簡單。下(xià)一(yī)節我(wǒ)(wǒ)将向您介紹Glow屬性。
　　8、Glow屬性
　　當對一(yī)個對象使用“Glow”屬性後，這個對象的邊緣就會産生(shēng)類似發光的效果。它的表達式如下(xià)：
　　Filter：Glow（Color=color，Strength=strength）
　　Glow屬性的參數隻有兩個：Color是指定發光的顔色，Strength指定發光的強度，參數值從1到255。讓我(wǒ)(wǒ)們先來看一(yī)下(xià)加上Glow屬性的效果圖：
　　怎麽樣，是不是有一(yī)種燃燒的火(huǒ)焰的感覺。實現這種效果的代碼如下(xià)：
　　<html>
　　　 <head>
　　　 <title>filter glow</title>
　　　 <style>//*開(kāi)始設置CSS樣式*//
　　　 
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <div class=“leaf”>//*leaf類樣式*//
　　　 <p style=“font-family：lucida handwriting；
　　　　　　　　　font-size：54pt；font-weight：bold；color：#003366；”>
　　　　Leaf Mylove</p>//*設置字體(tǐ)名稱、大(dà)小(xiǎo)、粗細、顔色*//
　　　 </div>
　　　 <div class=“weny”>//*weny類樣式*//
　　　 <p style=“font-family：bailey； font-size：48pt；
　　　　　　　　　font-weight：bold；color：#99CC66；”>
　　　 //設置字體(tǐ)名稱、大(dà)小(xiǎo)、粗細、顔色*//
　　　 Weny Good!</p>
　　　 </div>
　　　 </body>
　　</html>
　　您還可以随意修改顔色值，看看其他的發光效果是怎樣的。
　　本節主要講了Glow屬性的應用，下(xià)一(yī)節将向您介紹Gray屬性。
　9、Invert屬性
　　Invert屬性可以把對象的可視化屬性全部翻轉，包括色彩、飽和度和亮度值。
　　它的表達式也很簡單：
　　Filter：Invert
　　我(wǒ)(wǒ)們再來看一(yī)下(xià)加上Invert屬性前後的圖片效果變化（如下(xià)圖）：
　　　　　　　　　　　　　　
　　　　　　　　原圖　　　　　　　　　　　　　　　 Invert屬性效果圖
　　　　　　（點擊可放(fàng)大(dà)）　　　　　　　　　　　　　（點擊可放(fàng)大(dà)）
　　我(wǒ)(wǒ)們看到Invert屬性實際上達到的是一(yī)種“底片”的效果。
　　自己拿别的圖來試試吧。本節介紹的是Invert屬性，下(xià)一(yī)節将向您介紹Mask屬性。　
10、Mask屬性
　　Mask屬性爲對象建立一(yī)個覆蓋于表面的膜。它的表達式也很簡單：
　　Filter：Mask（Color=顔色）
　　隻有一(yī)個Color參數，用來指定使用什麽顔色作爲掩膜。
　　同樣，我(wǒ)(wǒ)們來看一(yī)下(xià)一(yī)幅圖片在加上mask屬性前後的效果（見下(xià)圖）：
原　圖
Mask屬性效果圖
　　加上MASK屬性的效果就好象是在用有色眼鏡看物(wù)體(tǐ)一(yī)樣。上面的效果的代碼如下(xià)：
　　<html>
　　　 <head>
　　　 <title> mask filter </title>
　　　 <style>//*設置CSS樣式開(kāi)始*//
　　　 
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <div>
　　　 <p> wenyleaf </p>
　　　 </div>
　　　 </body>
　　</html>
　　其實，您就算在代碼中(zhōng)去(qù)掉對字體(tǐ)前景色的定義，得到的效果還是一(yī)樣的。因爲有了Mask屬性的定義，它遮罩下(xià)的字體(tǐ)顔色的設置就已經失去(qù)了意義。
　　還有一(yī)點需要您注意的地方，mask屬性對圖片文件的支持還是不夠，不能達到應該有的效果。
　　本節講解了Mask屬性的應用，下(xià)一(yī)節将向您介紹Shadow（陰影）屬性。
11、Shadow屬性
　　Shadow屬性可以在指定的方向建立物(wù)體(tǐ)的投影。它的表達式是這樣的：
　　Filter：Shadow（Color=color，Direction=direction）
　　在這裏，Shadow有兩個參數值：Color參數用來指定投影的顔色；Direction參數用來指定投影的方向。
　　這裏說的方向與我(wǒ)(wǒ)們在第二節Blur屬性中(zhōng)提到的“方向與角度的關系”是一(yī)樣的。　　也許您會問，前面講到的Dropshadow屬性和Shadow屬性有什麽不同嗎(ma)？
　　光說的話(huà)，您恐怕還難以理解，讓我(wǒ)(wǒ)們看一(yī)看分(fēn)别利用這兩個屬性做出來的效果有什麽不同（見下(xià)圖）：
　
　　　　　　　　　Shadow效果　　　　　　　　Dropshadow效果
　　這樣一(yī)對比，就可以很明顯的看出兩者的不同。
　　Shadow屬性可以在任意角度進行投射陰影，Dropshadow屬性實際上是用偏移來定義陰影的。所以，看上去(qù)左圖的文字和陰影就像是一(yī)體(tǐ)的，而右圖的文字就像脫離(lí)了陰影一(yī)樣。
　　本例的代碼如下(xià)：
　　<html>
　　　<head>
　　　<title> shadow</title>
　　　<style>//*開(kāi)始設置CSS樣式*//
　　　
　　 </style>
　　 </head>
　　 <body>
　　 <div class=“shadow”>//*區域内爲Shadow類*//
　　 <p style=“font-family：bailey；font-size：48pt；
　　　　　　　　font-weight：bold；color：#FF9900；”>
　　　 Hongen Online</p>//*定義字體(tǐ)名稱、大(dà)小(xiǎo)、粗細、前景色*//
　　　</div>
　　　<div class=“dropshadow”>//*區域内爲Dropshadow類*//
　　　<p style=“font-family：bailey；font-size：48pt；
　　　　　　　　 font-weight：bold；color：#FF9900；”>
　　　 Hongen Online</p>//*定義字體(tǐ)樣式與Shadow類的一(yī)樣*//
　　　</div>
　　　</body>
　　</html>
　　本節講述了Shadow屬性的應用，下(xià)一(yī)節将向您介紹Wave（波紋）屬性。　
　12、Wave屬性
　　Wave屬性用來把對象按照垂直的波紋樣式打亂。它的表達式如下(xià)：
　　Filter：Wave（Add=True（False），Freq=頻(pín)率，LightStrength=增強光效，
　　　　　　Phase=偏移量，Strength=強度）
　　我(wǒ)(wǒ)們看到Wave屬性的表達式還是比較複雜(zá)的，它一(yī)共有五個參數。Add參數有兩個參數值：True代表把對象按照波紋樣式打亂；False代表不打亂；
　　Freq參數指生(shēng)成波紋的頻(pín)率，也就是指定在對象上共需要産生(shēng)多少個完整的波紋。　　LightStrength參數是爲了使生(shēng)成的波紋增強光的效果。參數值可以從0到100。　　　Phase參數用來設置正弦波開(kāi)始的偏移量。這個值的通用值爲0，它的可變範圍爲從0到100。這個值代表開(kāi)始時的偏移量占波長的百分(fēn)比。比如該值爲25，代表正弦波從90度（360*25%）的方向開(kāi)始。
　　說了一(yī)大(dà)堆，我(wǒ)(wǒ)們還是先看一(yī)個實例吧。比如下(xià)面這幅圖片（點擊可放(fàng)大(dà)）：
　　下(xià)面我(wǒ)(wǒ)們對上面這個頁面加上Wave效果，代碼如下(xià)：
　　<html>
　　　<head>
　　　<title> wave css</title>
　　　<style>//*定義CSS 樣式開(kāi)始*//
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div class=“wave”>//*定義DIV區域内爲Wave類*//
　　　<p style=“font-family：lucida handwriting；
　　　　　　　font-size=72pt； font-weight：bold；
　　　　　　　color：rgb(189,1,64)；”>Leaf</p>
　　　//*設置字體(tǐ)名稱、大(dà)小(xiǎo)、粗細、顔色*//
　　　</div>
　　　<p><img src=“ss01044.jpg”></p> //*導入圖片*// 　　　
　　</body>
　　</html>
　　這段代碼實現的效果如下(xià)圖：
　　如果把Wave的參數随便做一(yī)下(xià)改動，就會達到多種效果，請看另外(wài)一(yī)種效果：（如下(xià)圖）：
　　其實這種效果隻是增大(dà)了freq參數的值，減小(xiǎo)了Strength、LightStrength的值就可以了。您也可以多試試，改變其他的參數值，還可以達到許多不同的效果來。
　　本節主要講述了Wave屬性的應用，下(xià)一(yī)節将向您介紹Xray屬性。
　13、Xray屬性
　　Xray就是X射線的意思。
　　Xray屬性，顧名思義，這種屬性産生(shēng)的效果就是使對象看上去(qù)有一(yī)種X光片的感覺。它的表達式很簡單：
　　Filter：Xray
　　我(wǒ)(wǒ)們還是先來看一(yī)個頁面（如下(xià)圖）：
點擊可放(fàng)大(dà)
　　如果在上面的頁面中(zhōng)加入Xray屬性，也就是在<head>的<Style>中(zhōng)，增添下(xià)面這一(yī)句代碼：
　　Filter：Xray
　　您再看這個頁面就會是另一(yī)種效果了：（如下(xià)圖）
點擊可放(fàng)大(dà)
　　看，是不是就像給它拍了一(yī)張X光片一(yī)樣。

文章來源：http://www.hongen.com/pc/homepage/css/css0501.htm

免責聲明：本站相關技術文章信息部分(fēn)來自網絡，目的主要是傳播更多信息，如果您認爲本站的某些信息侵犯了您的版權，請與我(wǒ)(wǒ)們聯系，我(wǒ)(wǒ)們會即時妥善的處理，謝謝合作！