第9章+CSS濾鏡介紹.ppt

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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