第9章+CSS濾鏡介紹.ppt

1、第9章 CSS濾鏡介紹,本章介紹如何在網頁中利用CSS技術對元素增加濾鏡效果。 濾鏡這個詞語來源于攝影中的濾光鏡，簡單的說，濾光鏡就是拍攝時放在照相機鏡頭前面的一塊玻璃片或者塑料片。濾光鏡雖然形形色色，種類很多，但大體可以分為三大類，即可以用來校正照片外觀的濾光鏡，用來加強某種效果的濾光鏡以及用于產生特殊拍攝效果的濾光鏡。后來這樣的概念被應用在了圖片處理軟件中，比如著名的Photoshop，就有很多的濾鏡用來對圖片進行處理。CSS濾鏡和Photoshop濾鏡的作用類似，但是它特別針對網頁元素，不僅限于圖片等進行特殊處理從而達到特殊的藝術效果。 CSS濾鏡共可以分為界面濾鏡，靜態(tài)濾鏡和動態(tài)濾鏡三

2、種。作為初學者，我們首先將學習一下如何使用靜態(tài)濾鏡，這包括Alpha濾鏡，Blur濾鏡，Chroma濾鏡，DropShadow濾鏡等。掌握了靜態(tài)濾鏡之后，在本章的后半部分，我們還將介紹動態(tài)濾鏡和界面濾鏡。結合不同的濾鏡技術，我們的網頁可以呈現(xiàn)出非?？嵫５男Ч?。,9.1 CSS濾鏡概述,濾鏡是CSS中相對獨立的組成部分，它將特定的效果應用于文本容器，圖片和網頁上的其他對象。濾鏡通常是用Filter關鍵字在屬性中定義的，但是需要注意的是濾鏡有兩種寫法。,9.1.1 濾鏡的編寫規(guī)范與分類,根據(jù)IE版本的不同，濾鏡的寫法也有所不同，具體可以分為兩類： 對于IE4.0至IE5版本就支持的濾鏡，基本格式如

3、下: Filter:濾鏡名稱(參數(shù)) 而對于IE5.5及以上版本開始支持的濾鏡，編寫方式如下: filter : progid:DXImageTransform.Microsoft.濾鏡名稱(參數(shù)) 在這里progid:DXImageTransform.Microsoft是告知瀏覽器濾鏡的顯示需要用到DXImageTransform，也就是Microsoft DirectX Image Transform這個ActiveX對象來處理。作為初學者，我們不需要知道那么多深入的細節(jié)，只需要記住這個形式并且會用就可以了。,9.1.2 在網頁中增加濾鏡,現(xiàn)在有一個網頁，顯示了同事們周末爬山的照片。我們很

4、希望頁面能夠活潑一些，不用修改頁面上的圖片，就能獲得類似Photoshop處理的效果，濾鏡就是實現(xiàn)這個目標的途徑。舉例來說，有這樣一個網頁，如代碼。,給照片增加陰影濾鏡效果,9.2 透明度的問題:alpha通道,Alpha通道濾鏡可以用于為可視對象設置透明度效果。通過對alpha設置不同的參數(shù)值，能夠實現(xiàn)不同的效果。,9.2.1 Alpha濾鏡的屬性設置,Alpha濾鏡有若干個屬性需要設置，它們分別是， Opacity：Opacity在英文中就是不透明的意思，使用這個參數(shù)，可以控制屬性限制的元素的透明度。默認的值范圍是從0到100，它表示了不透明程度的大小或者百分比。當值為100的時候則代表完

5、全不透明。 FinishOpacity：大家可能注意到了Vista的桌面工具欄都是具有漸變的顏色的，這樣更有立體的效果。我們在網頁中也完全可以實現(xiàn)類似的效果，答案就是使用FinishOpacity屬性。顧名思義，F(xiàn)inish是結束，終點的意思，因此，這個屬性可以用來指定漸變效果結束時的透明度。這個參數(shù)的取值范圍也是0到100。 但是我們單獨使用FinishOpacity屬性是沒有用處的，因為我們還需要告訴瀏覽器我們要使用漸變，然后瀏覽器才知道要去尋找FinishOpacity的值。,9.2.2 Alpha濾鏡的實際例子,代碼顯示了一個復雜的漸變效果。 代碼 對圖片指定區(qū)域增加Alpha濾鏡效果

6、的代碼：alpha-2.html IMG filter:alpha(opacity:10,style=2,finishiopacity:90); 同事周末爬山 ,對圖片應用Alpha濾鏡,9.3 朦朧的美:blur,Blur濾鏡可以為網頁上的可視對象設置模糊朦朧的效果。如果說上面的Alpha濾鏡是給元素遮上了一層薄紗，并不改變元素本身的清晰度的話，這里的Blur則是將元素模糊虛化，呈現(xiàn)在我們的眼中則是類似元素在快速運動中，我們只能看清楚基本輪廓的效果。 圖9-4顯示了用畫圖軟件Fireworks對字體進行Blur處理之前和之后的一個效果。,圖片處理軟件中的Blur效果,9.4 增加透明色效果(

7、Chroma),Chroma濾鏡是用來將網頁中可視對象的某種顏色指定為透明色。根據(jù)這個定義，我們可以想見該濾鏡只有一個參數(shù)Color，用于指定需要變化的顏色。圖是對網頁圖片和按鈕應用了Chroma濾鏡的顯示效果。,為按鈕和圖片增加透明色效果,9.5 下落的陰影(Drop Shadow),Drop Shadow顧名思義就是下落的陰影，可以為網頁上的可見對象，一般是文字，創(chuàng)建陰影效果。不過這種陰影和我們后面要介紹的Shadow濾鏡不同，DropShadow濾鏡應用的對象是浮在陰影上方的，和陰影沒有關聯(lián)，而Shadow濾鏡則是陰影和本體相連接的。實際顯示的效果和Blur有點類似，如圖所示。,Drop

8、Shadow濾鏡效果,9.6 浮雕紋理（Emboss和Engrave),Emboss和Engrave也是非常有意思的濾鏡，他們能夠給元素創(chuàng)造雕刻的效果，使用得當，人人都可以做網頁上的雕塑家。這里，Emboss就是浮雕的意思，使物體的表面凸出。而Engrave則是雕刻的意思，使物體的表面凹進去形成圖案。不過實際的使用效果并沒有太多的區(qū)別，我們就把他們兩個放在一節(jié)中介紹。 先說Engrave。 在樣式表中的寫法是這樣的： Filter:progid:DXImageTransform.Microsoft.Engrave(enabled=bEnabled, Bias=fBias) 從寫法可以看出，En

9、grave濾鏡和我們之前介紹的有所不同，可見這個濾鏡是IE5。5以及以后的版本才開始支持的。從括號中我們可以發(fā)現(xiàn)Engrave濾鏡有Enabled和Bias這樣兩個參數(shù)。 Enabled：這個參數(shù)可以不特別指定，用于設置濾鏡是否使用，默認值是True。如果不想使用該濾鏡，則設置為False。 Bias：這個參數(shù)同樣是一個可選的設置。參數(shù)值是一個浮點數(shù)(Float)，也就是說是帶小數(shù)的數(shù)字。Bias用于設置添加到濾鏡效果的每種顏色組分值的百分比。取值范圍為 -1.0 1.0之間的數(shù)字，而默認值是 0.7。如果該參數(shù)設置的比較大，則會產生高亮濾光效果。對比度比較高的圖片受此濾鏡的影響較小。,9.7

10、 給元素增加一些翻轉變換（Flip),Flip共有兩種濾鏡，分別為FlipH和FlipV，代表水平翻轉和垂直翻轉。這兩種濾鏡可以為頁面上的可見元素建立鏡像。所謂鏡像，就是我們在鏡子中看到的自己。圖是網頁上對在本章經常作為例子的1.gif應用翻轉變換的顯示效果。,對同一圖片應用FlipX和FlipY濾鏡的效果,9.8 關于灰度(Gray),Gray濾鏡用于將彩色圖片轉換為灰度圖，這種效果在有的時候能夠創(chuàng)造出一種復古的意味，如圖所示。,應用Gray濾鏡使原始圖片變?yōu)榛叶葓D片,9.9 霓虹燈:設置光暈(Glow),當晚上我們走在繁華的商業(yè)區(qū)的時候，每每為閃閃發(fā)亮的霓虹燈而吸引。在不少的電影中，霓虹燈

11、也往往作為繁榮，夜生活等等含義的代名詞，穿插在段段膠片中。在網頁世界里，我們同樣可以把頁面上的文字點亮，讓瀏覽者有一個不同的心情。 網頁上的霓虹燈效果是通過CSS的Glow濾鏡來實現(xiàn)的。 圖顯示了這種霓虹燈的效果，,文字的各種光暈效果,9.10 獨特的效果:反色(Invert),Invert濾鏡用于將圖片中的色彩，飽和度和亮度都反轉，從而創(chuàng)建出底片的效果。該濾鏡沒有參數(shù)。圖顯示了所設置的反色效果。,反色效果,9.11 面紗與遮罩(Mask),Mask在英文中就是面具的意思，大家可能還記得金凱利主演的同名影片“面具”吧，金凱利帶上神奇的面具后從一個普通的小人物變成具有超強能力的人。在我們的網頁中

12、，如果能夠用好Mask濾鏡，說不定也會達到同樣的效果! Mask濾鏡的作用在于給可視對象添加膜效果，它具有唯一的參數(shù)Color，用于設置面具的顏色。對于網頁的瀏覽者來說，原來的可視對象中透明的像素都變成了面具的顏色，而所有不透明的像素則變?yōu)橥该鳌?聽起來可能有些抽象，如圖所示。,圖片應用面具濾鏡,9.12 運動模糊(Motion Blur),我們經常能夠看到這樣一些攝影作品，運動員在比賽中飛速的奔跑，他的身后好像有風被沖破的痕跡，動感十足。這樣的效果就叫做運動模糊。,9.12.1 運動模糊濾鏡的主要參數(shù),在網頁中，我們同樣可以實現(xiàn)運動模糊。將前面章節(jié)的Blur.html略作修改，就可以創(chuàng)建運動

13、模糊的濾鏡效果，,運動模糊 添加了原圖或原文字的運動模糊,9.12.2 不同Blur效果的比較,截至目前，我們已經介紹了多種給頁面元素增加Blur效果的方法，它們分別是：,多種Blur濾鏡在IE7中的效果,9.13 讓元素更立體：增加陰影(Shadow),我們在之前的章節(jié)中已經介紹了下落的陰影（Drop Shadow），那么本小節(jié)即將講述的Shadow濾鏡與前者有什么區(qū)別呢？我們不妨通過一個PK來了解各自的特點。 代碼包含了Drop Shadow和Shadow兩種陰影。,陰影大PK的結果,9.14 X射線效果(XRay),Xray濾鏡用于增強可視對象的輪廓，并將原來對象的彩色信息轉變?yōu)榛疑袼?/p>

14、，正如濾鏡名字所說的一樣，形成了一種X射線的效果。這個濾鏡就一個參數(shù)Enabled，代表濾鏡效果是否打開，默認為True，也就是打開的狀態(tài)。因此，我們使用的時候可以不指定任何參數(shù)，還是非常簡單的。 圖是應用了XRay濾鏡的圖片和原始圖片的對比，,XRay濾鏡效果,9.15 給文字增加波浪(Wave),Wave濾鏡用于為可視對象創(chuàng)建波紋效果，工作原理是使可視對象沿著垂直方向的軸通過正弦曲線的方式來顯示。通過對波浪濾鏡設置不同的參數(shù)，可以獲得不同的波紋效果。 Wave濾鏡的參數(shù)如下： Add：該參數(shù)用于設置對象是否要按照正弦波形式顯示。默認值為true，也可以設置成false。 Freq：該參數(shù)用

15、于設置波形的頻率。 Lightstrength：該參數(shù)用于設置波形的光影效果。取值為0-100的整數(shù)，該數(shù)值越大，光影效果就越明顯。 Phase：該參數(shù)用于設置波形開始時候的偏移量，取值為0-100的整數(shù)，表示偏移量取自波長的百分比，具體的含義是這樣的：如果數(shù)值為50，則表示顯示的正弦波從180度的方向開始。 Strength：該參數(shù)用于設置波形的振幅。,9.16 基本圖形濾鏡(BasicImage),前面我們講過的各種濾鏡應用在圖片上都能產生有趣的效果，但如果我們需要對圖片顯示出多種效果，靠濾鏡的疊加書寫起來就太麻煩了，有沒有一次性解決問題的方法呢?答案是肯定的。微軟給我們帶來了基本圖形濾鏡

16、，也就是BasicImage。不過注意，這個濾鏡是IE5.5以及以上版本才支持的。,BasicImage濾鏡效果,9.17 動態(tài)濾鏡,動態(tài)濾鏡也可以叫做轉換濾鏡(Transition Filter)，之所以這么稱呼它是因為動態(tài)濾鏡的效果產生于元素內容發(fā)生改變的時候，這種改變在網頁上實時發(fā)生，一般要編程實現(xiàn)，而不像前文所述靜態(tài)濾鏡那樣，我們看到的都是效果生效后的網頁。 動態(tài)濾鏡的效果有多種多樣，每種效果的參數(shù)也比較多，我們在這里介紹其中比較重要的幾個，對它們的參數(shù)也僅列出對效果影響比較大的部分，剩余的濾鏡和參數(shù)有興趣的讀者根據(jù)已有的規(guī)律可以自己研究。,9.17.1 轉移濾鏡的種類,包括我們已經見

17、到的revealTrans動態(tài)濾鏡在內，動態(tài)濾鏡共有： Barn：模擬開關門效果顯示內容。Blinds：百葉窗效果。 CheckerBoard：國際象棋棋盤格效果Fade：淡入淡出效果。 GradientWipe：漸變轉換效果Inset：對角線擴張效果。 Iris：快門擴張或者收縮效果。Pixelate：像素化效果 RadialWipe：類似汽車風擋雨刷掃過的效果RandomBars：隨機線揭示效果。 RandomDissolve：隨機點融化效果。Slide：滑動效果。 Spiral：螺旋動畫展示效果。Stretch：拉伸呈現(xiàn)效果。 Strips：條狀顯現(xiàn)效果。Wheel：輪狀顯現(xiàn)效果。 Zi

18、gzag：崎嶇顯現(xiàn)效果。BlendTrans：漸隱效果。RevealTrans：可設置24種特效的集合。,9.17.2 Barn濾鏡,Barn在英文中的意思就是牲口倉或谷倉。那么它和Barn濾鏡實際顯示的效果有什么關系呢? 我這里先講一個英語諺語，Close the barn door after the horse escaped。 翻譯之后就是“在馬跑了之后再來關牲口棚的門”。很顯然，這是毫無用處的，中文里也有類似的詞語，比如亡羊補牢?？梢姡珺arn和關門還是有很大關系的。 Barn濾鏡的使用方法很簡單。 filter : progid:DXImageTransform.Microsoft

19、.Barn(enabled=bEnabled, duration=fDuration, motion=sMotion, orientation=sOrientation ),9.17.3 動態(tài)濾鏡的特別寫法,從代碼中可以看出，動態(tài)濾鏡的寫法與靜態(tài)濾鏡有所不同。動態(tài)濾鏡在元素內容沒有變化的時候是無法發(fā)揮作用的。這一點可以通過修改代碼來證明。如果將和之間的6行代碼刪除，在瀏覽器中瀏覽文件，Barn濾鏡并不發(fā)揮作用。 使Barn濾鏡發(fā)揮作用的正是那6行Javascript代碼。 （1）首先，document.getElementById(“Img1”)獲得了當前網頁中Id=Img1的圖片對象。 然后

20、調用濾鏡的Apply()方法，在Id為Img1的圖片上應用濾鏡，因為聲明的濾鏡只有一個，因此filters0就代表了Barn濾鏡。 （2）再將Img1的圖片來源修改為mohu.gif，這就造成了元素內容的改變，Transition發(fā)生。Barn濾鏡終于可以發(fā)揮作用了。 （3）最后再調用濾鏡的Play()方法，我們設置好的效果顯示了出來。 對于其他的若干種動態(tài)濾鏡，我們也可以按照相同的思路和步驟來進行編程。但是，由于需要一定的Javascript基礎，這種方法還是有一定難度的，我們將在第16章中詳細介紹。目前，讀者只要能夠看懂上面的代碼，在實際中能夠照搬應用就可以了。,9.17.4 Reveal

21、Trans動態(tài)濾鏡,RevealTrans這個詞是由Reveal(中文意思為顯示，展現(xiàn))和Transition(中文意思為轉換)的縮寫共同組成的。顧名思義，這個濾鏡的作用就是在轉換的過程中顯示新的圖片。RevealTrans濾鏡可以實現(xiàn)24種特效，其中包括了很多單一效果的濾鏡，因此在實際應用中這種濾鏡應用的最多。 RevealTrans濾鏡的語法如下： filter:progid:DXImageTransform.Microsoft.RevealTrans(enabled=bEnabled, duration=fDuration, transition=iTransitionType ),9.

22、17.5 RevealTrans濾鏡在網頁切換中的應用,值得一提的是，RevealTrans還有另外的一個用處，也就是前面提到的它能夠產生網頁切換時的特殊效果。 我們有兩個簡單的網頁，分別為Transition-page1.html和Transition-page2.html。,離開頁面1時產生的濾鏡效果,9.18 背景濾鏡,背景濾鏡一共只有兩個，它們分別是AlphaImageLoader和Gradient。在具體學習之前，有必要學習一下相關背景知識- PNG圖片格式。,9.18.1 PNG圖片格式,在網頁中使用的圖像格式有很多，像GIF、PNG以及JPEG等，各種格式的優(yōu)勢不盡相同。近年來，

23、隨著對GIF使用者收取專利費用，各瀏覽器對PNG格式越來越好的支持等原因，網絡上的GIF圖片格式用的越來越少。就GIF來說，PNG圖像比GIF圖像有更大的優(yōu)勢：有完全的alpha通道，支持更豐富的色彩（GIF圖片格式只支持256種顏色），無損壓縮能力等。其中最主要的優(yōu)點之一就是PNG支持完全的透明。,9.18.2 AlphaImageLoader濾鏡,由于PNG圖片格式有很多優(yōu)點，越來越多的瀏覽器開始支持它。Firefox以優(yōu)秀的PNG支持著稱，但是IE6則不同，它只能支持完全不透明的PNG，因此即使是包含透明像素的PNG文件，在IE6中也無法看出來。 解決辦法就是應用AlphaImageLoader濾鏡。該濾鏡可以支持透明