第9章+CSS濾鏡介紹.ppt

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

2、種。作為初學(xué)者，我們首先將學(xué)習(xí)一下如何使用靜態(tài)濾鏡，這包括Alpha濾鏡，Blur濾鏡，Chroma濾鏡，DropShadow濾鏡等。掌握了靜態(tài)濾鏡之后，在本章的后半部分，我們還將介紹動態(tài)濾鏡和界面濾鏡。結(jié)合不同的濾鏡技術(shù)，我們的網(wǎng)頁可以呈現(xiàn)出非?？嵫５男Ч?。,9.1 CSS濾鏡概述,濾鏡是CSS中相對獨(dú)立的組成部分，它將特定的效果應(yīng)用于文本容器，圖片和網(wǎng)頁上的其他對象。濾鏡通常是用Filter關(guān)鍵字在屬性中定義的，但是需要注意的是濾鏡有兩種寫法。,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對象來處理。作為初學(xué)者，我們不需要知道那么多深入的細(xì)節(jié)，只需要記住這個形式并且會用就可以了。,9.1.2 在網(wǎng)頁中增加濾鏡,現(xiàn)在有一個網(wǎng)頁，顯示了同事們周末爬山的照片。我們很

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

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

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

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

8、Shadow濾鏡效果,9.6 浮雕紋理（Emboss和Engrave),Emboss和Engrave也是非常有意思的濾鏡，他們能夠給元素創(chuàng)造雕刻的效果，使用得當(dāng)，人人都可以做網(wǎng)頁上的雕塑家。這里，Emboss就是浮雕的意思，使物體的表面凸出。而Engrave則是雕刻的意思，使物體的表面凹進(jìn)去形成圖案。不過實(shí)際的使用效果并沒有太多的區(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ù)可以不特別指定，用于設(shè)置濾鏡是否使用，默認(rèn)值是True。如果不想使用該濾鏡，則設(shè)置為False。 Bias：這個參數(shù)同樣是一個可選的設(shè)置。參數(shù)值是一個浮點(diǎn)數(shù)(Float)，也就是說是帶小數(shù)的數(shù)字。Bias用于設(shè)置添加到濾鏡效果的每種顏色組分值的百分比。取值范圍為 -1.0 1.0之間的數(shù)字，而默認(rèn)值是 0.7。如果該參數(shù)設(shè)置的比較大，則會產(chǎn)生高亮濾光效果。對比度比較高的圖片受此濾鏡的影響較小。,9.7

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

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

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

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

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

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

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

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

18、gzag：崎嶇顯現(xiàn)效果。BlendTrans：漸隱效果。RevealTrans：可設(shè)置24種特效的集合。,9.17.2 Barn濾鏡,Barn在英文中的意思就是牲口倉或谷倉。那么它和Barn濾鏡實(shí)際顯示的效果有什么關(guān)系呢? 我這里先講一個英語諺語，Close the barn door after the horse escaped。 翻譯之后就是“在馬跑了之后再來關(guān)牲口棚的門”。很顯然，這是毫無用處的，中文里也有類似的詞語，比如亡羊補(bǔ)牢?？梢姡珺arn和關(guān)門還是有很大關(guān)系的。 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)濾鏡在元素內(nèi)容沒有變化的時候是無法發(fā)揮作用的。這一點(diǎn)可以通過修改代碼來證明。如果將和之間的6行代碼刪除，在瀏覽器中瀏覽文件，Barn濾鏡并不發(fā)揮作用。 使Barn濾鏡發(fā)揮作用的正是那6行Javascript代碼。 （1）首先，document.getElementById(“Img1”)獲得了當(dāng)前網(wǎng)頁中Id=Img1的圖片對象。 然后

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

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

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

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