CSS濾鏡即FILTER的用法詳解

悟靜 2010-01-06

展開全文

1、概述

　　好了，下面我們將進(jìn)入CSS的最精彩的部分--濾鏡，它將把我們帶入絢麗多姿的多媒體世界。正是有了濾鏡屬性，頁面才變得更加漂亮。
　　CSS的濾鏡屬性的標(biāo)識符是filter。為了使您對它有個(gè)整體的印象，我們先來看一下它的書寫格式：
　　 filter：filtername（parameters）
　　怎么樣？是不是很簡單，看上去與前面講的屬性定義沒什么太大的差別。Filter是濾鏡屬性選擇符。
　　也就是說，只要您進(jìn)行濾鏡操作，就必須先定義filter；filtername是濾鏡屬性名，這里包括alpha、blur、chroma等等多種屬性，詳細(xì)內(nèi)容請看下表：
　　上面filter表達(dá)式中括號內(nèi)的parameters是表示各個(gè)濾鏡屬性的參數(shù)，也正是這些參數(shù)決定了濾鏡將以怎樣的效果顯示。
　　看了上面長長的列表，是不是覺得很困難呀？不要緊，我們接下來一個(gè)一個(gè)的介紹這些屬性在CSS中是怎樣實(shí)現(xiàn)的（很簡單喲^_^）。
　　下一節(jié)我們將首先學(xué)習(xí)Alpha透明屬性的應(yīng)用。

2、alpha屬性

　　alpha是來設(shè)置透明度的。先來看一下它的表達(dá)格式：
　　filter：alpha（opacity=opcity，finishopacity=finishopacity，
　　style=style，startX=startX，startY=startY，finishX=finishX，
　　finishY=finishY）
　　哇，怎么這么長。是啊，不過這些參數(shù)都各有其用。
　　Opacity代表透明度等級，可選值從0到100，0代表完全透明，100代表完全不透明。 Style參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀；1代表線形；2代表放射狀；3代表長方形。
　　Finishopacity是一個(gè)可選項(xiàng)，用來設(shè)置結(jié)束時(shí)的透明度，從而達(dá)到一種漸變效果，它的值也是從0到100。 StartX和StartY代表漸變透明效果的開始坐標(biāo)，finishX和finishY代表漸變透明效果的結(jié)束坐標(biāo)。
　　從上面講的我們可以看出，如果不設(shè)置透明漸變效果，那么只需設(shè)置opacity這一個(gè)參數(shù)就可以了。說了這么多，我們來看一個(gè)實(shí)例吧（見附件圖一）：
　　實(shí)現(xiàn)上面這種效果的代碼如下：
　　<html>
　　<head>
　　<title>alpha</title>
　　<style>//*定義CSS樣式*//
　　
　　</style>
　　</head>
　　<body>
　　<div>
　　<p style=“font-size：48；font-weight：bold；color：red；”>
　　Beautiful </p>//*定義字體屬性，前景色為紅色*//
　　</div>
　　<p><img src=“ss01076.jpg”> </p>
　　//*導(dǎo)入一張圖片*//
　　</body>
　　</html>
　　如果在上面的代碼中稍做改動(dòng)，則將產(chǎn)生另外多種效果。我們只修改img的樣式屬性，把head中的Img樣式屬性代碼改為如下所示：
　　img{position：absolute；top：20；left：40；
　　filter：alpha(opacity=0,finishopacity=100,
　　style=1,startx=0,starty=85,finishx=150,finishy=85);}
　 //*設(shè)置透明漸變效果，起始坐標(biāo)，終止?jié)u變坐標(biāo)，并設(shè)置透明樣式值（style=1）為線形*//
3、blur屬性

　　假如您用手在一幅還沒干透的油畫上迅速劃過，畫面就會(huì)變得模糊。CSS下的blur屬性就會(huì)達(dá)到這種模糊的效果。
　　先來看一下blur屬性的表達(dá)式：
　　filter：blur（add=add，direction，strength=strength）
　　我們看到blur屬性有三個(gè)參數(shù)：add、direction、strength。
　　Add參數(shù)有兩個(gè)參數(shù)值：true和false。意思是指定圖片是否被改變成模糊效果。　　　Direction參數(shù)用來設(shè)置模糊的方向。模糊效果是按照順時(shí)針方向進(jìn)行的。其中0度代表垂直向上，每45度一個(gè)單位，默認(rèn)值是向左的270度。角度方向的對應(yīng)關(guān)系見下表(06.gif)：
　　Strength參數(shù)值只能使用整數(shù)來指定，它代表有多少像素的寬度將受到模糊影響。默認(rèn)值是5像素。
　　還是看一個(gè)例子吧，見下圖 (07.jpg)：
　　看起來是不是有些像萬花筒，在這個(gè)例子中加入了一些JavaScript的語句，代碼如下：
　　<html>
　　　<head>
　　　<title>blur css</title>
　　　<script>
　　　function handlechange(obj)
　　　//*設(shè)置一個(gè)循環(huán)函數(shù)handlechange，對象是obj*//
　　　{ with(obj.filters(0))//*Obj的filter屬性*//
　　　 { if (strength<255)//*設(shè)置循環(huán)條件*//
　　　　 { strength +=1；direction +=45；}
　　　　//*每循環(huán)一次strength就加1，direction加45度*// 　　　
　　　 }
　　　}
　　　</script>
　　　</head>
　　　<body>
　　　<p><img id =“img1” src=“ss01087.jpg” 　　　　　　　　
　　　　　style=“filter：blur(strength=1)”
　　　　　onfilterchange=“handlechange(this)”>
　　　//*導(dǎo)入一幅圖片，初始blur屬性strength等于1，同時(shí)調(diào)用onfilterchange函數(shù)*//
　　　</p>
　　　 </body>
　　</html>
　　注：在javascript中blur屬性是這樣定義的：
　　　　[oBlurfilter=] object.Filters.blur
　　這個(gè)例子是Blur屬性的一個(gè)比較復(fù)雜的例子，下一節(jié)我將向您介紹兩個(gè)較簡單的blur屬性效果。

通過blur屬性還可以設(shè)置頁面中的字體。如果把字體的blur屬性add參數(shù)值定義為1，得出來的字體效果是這樣的（如圖08.gif）：
　　怎么樣，是不是有些印象派的意思，這種效果的實(shí)現(xiàn)代碼如下：
　　<html>
　　　<head>
　　　<title>filter blur</title>
　　　<style>//*CSS樣式定義開始*//
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div style=“width:702； height: 288”>
　　　<p style=“font-family:lucida handwirting italic；
　　　 font-size:72；font-style:bold；color:rgb(55,72,145)；” >
　　　 LEAF</p>
　　　//*定義字體名稱、大小、樣式、前景色*//
　　　</div>
　　　</body>
　　</html>
　　我們看到strength設(shè)置為25，如果把其值再改大一些，就會(huì)達(dá)到非?？鋸埖男Ч?，同時(shí)把Direction參數(shù)值為180
　　用blur屬性設(shè)置字體可以達(dá)到很多效果，把direction和strength再做修改，還能達(dá)到多種效果，您可以自己修改試一試。
4、Chroma屬性

　　Chroma屬性可以設(shè)置一個(gè)對象中指定的顏色為透明色，它的表達(dá)式如下：
　　Filter：Chroma（color=color）
　　這個(gè)屬性的表達(dá)式是不是很簡單，它只有一個(gè)參數(shù)。只需把您想要指定透明的顏色用Color參數(shù)設(shè)置出來就可以了。比如下面這幅圖(10.gif)：
　　圖中顯示兩種字體，兩種顏色，我們現(xiàn)在對“leaves”字體添加chroma屬性，使其透明。代碼如下：
　　<html>
　　　<head>
　　　<title>chroma filter</title>
　　　<style>
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p>LEAVES <em>LOVE</em></p>
　　　</div>
　　　</body>
　　</html>
　　通過上面代碼中對chroma的屬性設(shè)置，使綠色透明。顯示效果如下圖(11.gif)：
　　我們看到綠色的leaves字體不見了，實(shí)際上它是透明了，在IE下點(diǎn)擊它所在的區(qū)域，它還是會(huì)顯示出來（見下圖12.gif）：
　　另外，需要注意的是，chroma屬性對于圖片文件不是很適合。因?yàn)楹芏鄨D片是經(jīng)過了減色和壓縮處理（比如JPG、GIF等格式），所以它們很少有固定的位置可以設(shè)置為透明。

　　

　　5、DropShadow屬性

　　DropShadow屬性是為了添加對象的陰影效果的。它實(shí)現(xiàn)的效果看上去就像使原來的對象離開頁面，然后在頁面上顯示出該對象的投影。看一看它的表達(dá)式：
　　Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，
　　　　　　　　　　　　Positive=positive）
　　該屬性一共有四個(gè)參數(shù)： Color代表投射陰影的顏色。 Offx和offy分別X方向和Y方向陰影的偏移量。偏移量必須用整數(shù)值來設(shè)置。如果設(shè)置為正整數(shù)，代表X軸的右方向和Y軸的向下方向。設(shè)置為負(fù)整數(shù)則相反。
　　Positive參數(shù)有兩個(gè)值：True為任何非透明像素建立可見的投影，F(xiàn)alse為透明的像素部分建立可見的投影。
　　同樣，我們先來看一個(gè)例子（見下圖13.gif）：
　　看，圖中的文字就像是從頁面上飛出來一樣，并且留下了一層淡淡的影子。
　　實(shí)際上在這里應(yīng)用的就是CSS的DropShadow屬性，我們來看一下它的代碼：
　　<html>
　　　<head>
　　　<title>dropshadow </title>
　　　<style>//*定義CSS樣式*//
　　　
　　　//*定義DIV范圍內(nèi)的樣式，絕對定位，投影的顏色為#FFCCFF，
　　　投影坐標(biāo)為向右偏移15個(gè)像素，向下偏移10個(gè)像素*//
　　　</style>
　　　</head>
　　　<body>
　　　<div>
　　　<p style=“font-family：matisse itc；font-size：64；
　　　　　　　　font-weight：bold；color：#CC00CC；”>
　　　//*定義字體名稱、大小、粗細(xì)、顏色*//
　　　Love Leaf </p>
　　 </div>
　　 </body>
　　 </html>
　　和chroma屬性一樣，Dropshadow屬性對圖象的支持不好，我指的是JPEG、GIF格式的圖象文件。
　　不能支持的原因與Chroma一樣，因?yàn)檫@種圖象的顏色很豐富，很難找到一個(gè)投射陰影的位置。

　　6、FlipH、FlipV屬性

　　Flip是CSS濾鏡的翻轉(zhuǎn)屬性，F(xiàn)lipH代表水平翻轉(zhuǎn)，F(xiàn)lipV代表垂直翻轉(zhuǎn)。它們的表達(dá)式很簡單，分別是：
　　Filter：FlipH
　　Filter：FlipV
　　我們先來看一幅圖(14.jpg)：
　　下面我們分別對它實(shí)現(xiàn)水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)，并且在圖片上方的一段文字，也發(fā)生翻轉(zhuǎn)。代碼如下：
　　<html>
　　　<head>
　　　<title>flip css</title>
　　　<style>//*設(shè)置CSS樣式開始*//
　　　
　　 </style>
　　 </head>
　　　<body>
　　　<div>
　　　<p style=“font-family：bailey；font-size：36pt；
　　　　　　　　　font-weight：bold； color：rgb(10,128,156)；”>
　　　 Leaf Village </p>
　　 //*定義字體名稱、大小、粗細(xì)、顏色*//
　　 </div>
　　 <p><img src=“ss05058.jpg”></p>
　　 //*導(dǎo)入一張圖片*//
　　 </body>
　　</html>
　　代碼產(chǎn)生的兩個(gè)效果分別如下圖：( 15.jpg 為水平翻轉(zhuǎn)；16.jpg 為垂直翻轉(zhuǎn) )

　　

　　8、Glow屬性

　　當(dāng)對一個(gè)對象使用“Glow”屬性后，這個(gè)對象的邊緣就會(huì)產(chǎn)生類似發(fā)光的效果。它的表達(dá)式如下：
　　Filter：Glow（Color=color，Strength=strength）
　　Glow屬性的參數(shù)只有兩個(gè)：Color是指定發(fā)光的顏色，Strength指定發(fā)光的強(qiáng)度，參數(shù)值從1到255。讓我們先來看一下加上Glow屬性的效果圖(17.gif)：
　　怎么樣，是不是有一種燃燒的火焰的感覺。實(shí)現(xiàn)這種效果的代碼如下：
　　<html>
　　　 <head>
　　　 <title>filter glow</title>
　　　 <style>//*開始設(shè)置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>//*設(shè)置字體名稱、大小、粗細(xì)、顏色*//
　　　 </div>
　　　 <div class=“weny”>//*weny類樣式*//
　　　 <p style=“font-family：bailey； font-size：48pt；
　　　　　　　　　font-weight：bold；color：#99CC66；”>
　　　 //設(shè)置字體名稱、大小、粗細(xì)、顏色*//
　　　 Weny Good!</p>
　　　 </div>
　　　 </body>
　　</html>
　　您還可以隨意修改顏色值，看看其他的發(fā)光效果是怎樣的。

　　7、Gray屬性

　　Gray屬性把一張圖片變成灰度圖。它的表達(dá)式很簡單：
　　Filter：Gray
　　其實(shí)這個(gè)屬性沒什么好講的，只需在您定義的IMG樣式中加入一句代碼：
　　{Filter：Gray}就一切OK了。
　　下面兩幅圖分別代表未加Gray屬性和添加了Gray屬性的效果：

　

　　9、Invert屬性

　　Invert屬性可以把對象的可視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度和亮度值。
　　它的表達(dá)式也很簡單：
　　Filter：Invert
　　我們再來看一下加上Invert屬性前后的圖片效果變化：
　　我們看到Invert屬性實(shí)際上達(dá)到的是一種“底片”的效果。
　　自己拿別的圖來試試吧。

　

　　10、Mask屬性

　　Mask屬性為對象建立一個(gè)覆蓋于表面的膜。它的表達(dá)式也很簡單：
　　Filter：Mask（Color=顏色）
　　只有一個(gè)Color參數(shù)，用來指定使用什么顏色作為掩膜。
　　同樣，我們來看一下一幅圖片在加上mask屬性前后的效果（見圖 22.gif 為原圖 ; 23.gif 為加了Mask屬性的效果圖）：
　　加上MASK屬性的效果就好象是在用有色眼鏡看物體一樣。上面的效果的代碼如下：
　　<html>
　　　 <head>
　　　 <title> mask filter </title>
　　　 <style>//*設(shè)置CSS樣式開始*//
　　　 
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <div>
　　　 <p> wenyleaf </p>
　　　 </div>
　　　 </body>
　　</html>
　　其實(shí)，您就算在代碼中去掉對字體前景色的定義，得到的效果還是一樣的。因?yàn)橛辛薓ask屬性的定義，它遮罩下的字體顏色的設(shè)置就已經(jīng)失去了意義。
　　還有一點(diǎn)需要您注意的地方，mask屬性對圖片文件的支持還是不夠，不能達(dá)到應(yīng)該有的效果。

　

　　11、Shadow屬性

　　Shadow屬性可以在指定的方向建立物體的投影。它的表達(dá)式是這樣的：
　　Filter：Shadow（Color=color，Direction=direction）
　　在這里，Shadow有兩個(gè)參數(shù)值：Color參數(shù)用來指定投影的顏色；Direction參數(shù)用來指定投影的方向。
　　這里說的方向與我們在第二節(jié)Blur屬性中提到的“方向與角度的關(guān)系”是一樣的。　　也許您會(huì)問，前面講到的Dropshadow屬性和Shadow屬性有什么不同嗎？
　　光說的話，您恐怕還難以理解，讓我們看一看分別利用這兩個(gè)屬性做出來的效果有什么不同（見圖 24.gif 為 Shadow效果 ; 25.gif 為 Dropshadow效果）：
　　這樣一對比，就可以很明顯的看出兩者的不同。
　　Shadow屬性可以在任意角度進(jìn)行投射陰影，Dropshadow屬性實(shí)際上是用偏移來定義陰影的。所以，看上去左圖的文字和陰影就像是一體的，而右圖的文字就像脫離了陰影一樣。
　　本例的代碼如下：
　　<html>
　　　<head>
　　　<title> shadow</title>
　　　<style>//*開始設(shè)置CSS樣式*//
　　　
　　 </style>
　　 </head>
　　 <body>
　　 <div class=“shadow”>//*區(qū)域內(nèi)為Shadow類*//
　　 <p style=“font-family：bailey；font-size：48pt；
　　　　　　　　font-weight：bold；color：#FF9900；”>
　　　 Hongen Online</p>//*定義字體名稱、大小、粗細(xì)、前景色*//
　　　</div>
　　　<div class=“dropshadow”>//*區(qū)域內(nèi)為Dropshadow類*//
　　　<p style=“font-family：bailey；font-size：48pt；
　　　　　　　　 font-weight：bold；color：#FF9900；”>
　　　 Hongen Online</p>//*定義字體樣式與Shadow類的一樣*//
　　　</div>
　　　</body>
　　</html>

　

　　12、Wave屬性

　　Wave屬性用來把對象按照垂直的波紋樣式打亂。它的表達(dá)式如下：
　　Filter：Wave（Add=True（False），F(xiàn)req=頻率，LightStrength=增強(qiáng)光效，Phase=偏移量，Strength=強(qiáng)度）
　　我們看到Wave屬性的表達(dá)式還是比較復(fù)雜的，它一共有五個(gè)參數(shù)。Add參數(shù)有兩個(gè)參數(shù)值：True代表把對象按照波紋樣式打亂；False代表不打亂；
　　Freq參數(shù)指生成波紋的頻率，也就是指定在對象上共需要產(chǎn)生多少個(gè)完整的波紋。　　LightStrength參數(shù)是為了使生成的波紋增強(qiáng)光的效果。參數(shù)值可以從0到100。　　　Phase參數(shù)用來設(shè)置正弦波開始的偏移量。這個(gè)值的通用值為0，它的可變范圍為從0到100。這個(gè)值代表開始時(shí)的偏移量占波長的百分比。比如該值為25，代表正弦波從90度（360*25%）的方向開始。
　　說了一大堆，我們還是先看一個(gè)實(shí)例吧。比如下面這幅圖片（26.gif）：
　　下面我們對上面這個(gè)頁面加上Wave效果，代碼如下：
　　<html>
　　　<head>
　　　<title> wave css</title>
　　　<style>//*定義CSS 樣式開始*//
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<div class=“wave”>//*定義DIV區(qū)域內(nèi)為Wave類*//
　　　<p style=“font-family：lucida handwriting；
　　　　　　　font-size=72pt； font-weight：bold；
　　　　　　　color：rgb(189,1,64)；”>Leaf</p>
　　　//*設(shè)置字體名稱、大小、粗細(xì)、顏色*//
　　　</div>
　　　<p><img src=“ss01044.jpg”></p> //*導(dǎo)入圖片*// 　　　
　　</body>
　　</html>
　　這段代碼實(shí)現(xiàn)的效果如下圖(27.gif)：
　　如果把Wave的參數(shù)隨便做一下改動(dòng)，就會(huì)達(dá)到多種效果，請看另外一種效果：（如圖28.gif）：
　　其實(shí)這種效果只是增大了freq參數(shù)的值，減小了Strength、LightStrength的值就可以了。您也可以多試試，改變其他的參數(shù)值，還可以達(dá)到許多不同的效果來。

　　

　　13、Xray屬性

　　Xray就是X射線的意思。
　　Xray屬性，顧名思義，這種屬性產(chǎn)生的效果就是使對象看上去有一種X光片的感覺。它的表達(dá)式很簡單：
　　Filter：Xray
　　我們還是先來看一個(gè)頁面（如下圖 29.jpg）：
　　如果在上面的頁面中加入Xray屬性，也就是在<head>的<Style>中，增添下面這一句代碼：
　　Filter：Xray
　　您再看這個(gè)頁面就會(huì)是另一種效果了：（如圖30.jpg）
　　看，是不是就像給它拍了一張X光片一樣。

本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

CSS濾鏡 即FILTER的用法詳解

CSS濾鏡即FILTER的用法詳解