第13天CSS 濾鏡

三、CSS 濾鏡

CSS樣式表是一種為超文本標(biāo)簽語(yǔ)言提供增強(qiáng)補(bǔ)充服務(wù)的技術(shù)，可對(duì)每一個(gè)html的標(biāo)簽做精雕細(xì)刻的修飾。只用html制作的網(wǎng)頁(yè)，對(duì)頁(yè)面內(nèi)各部分的修飾能力有限且語(yǔ)句煩鎖，樣式表正是彌補(bǔ)這一缺陷的有力技術(shù)，它語(yǔ)句文法簡(jiǎn)單，只要在源碼中插入style語(yǔ)句就可輕易實(shí)現(xiàn)頁(yè)面內(nèi)任意文本顏色、背景、邊框、行距、字距的添刪和修飾等功能，使網(wǎng)頁(yè)更加生動(dòng)活潑，從而獲得滿意的效果。當(dāng)然，樣式表的強(qiáng)大還依靠的就是它的濾鏡功能。因?yàn)橛辛藶V鏡，大家就可以輕易地創(chuàng)造出“專業(yè)”的藝術(shù)效果。

一、什么是樣式表濾鏡

說到濾鏡，其實(shí)它并不是對(duì)圖像進(jìn)行了什么處理，而是在瀏覽器中對(duì)使用了該屬性的對(duì)象進(jìn)行一定的修飾。樣式表濾鏡實(shí)際上是樣式表一個(gè)新的擴(kuò)展部分，使用這種技術(shù)簡(jiǎn)單的語(yǔ)法就可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個(gè)標(biāo)準(zhǔn)的html元素上，例如圖片、文本、以及其他一些對(duì)象，為頁(yè)面添加一些豐富的變化。如果大家有一些腳本語(yǔ)言的基礎(chǔ)，能夠把濾鏡效果與類似javascript的腳本代碼做一些結(jié)合，就可以擁有一個(gè)在樣式表濾鏡與腳本共同作用下建立的強(qiáng)大的動(dòng)態(tài)交互文檔工具。現(xiàn)在能使用的濾鏡有13個(gè)之多，不過要欣賞到這些濾鏡的特效，必須要求用戶的瀏覽器必須在IE4.0/NC6.0之上，因?yàn)橹挥羞@些版本的瀏覽器才能支持樣式表濾鏡效果。

二、常用的樣式表濾鏡

隨著樣式表技術(shù)的不斷成熟，其濾鏡功能和種類也在不斷增多。如果用戶能夠熟練地混合使用它們，將可以產(chǎn)生意想不到的效果。在操作上，用戶只需要了解具體濾鏡的實(shí)際效果后，就能根據(jù)實(shí)際進(jìn)行微調(diào)了。為了使大家能有針對(duì)性地使用濾鏡，下面就把一些常用濾鏡的功能和參數(shù)詳細(xì)介紹如下：

1、濾鏡 作用：該濾鏡可以實(shí)現(xiàn)各種溶入效果，如果大家將該濾鏡與網(wǎng)頁(yè)腳本語(yǔ)言結(jié)合起來，對(duì)濾鏡的參數(shù)進(jìn)行處理的話，就能很輕易地做出淡入淡出的效果來。 語(yǔ)法：{FILTER：ALPHA(opacity=opacity，finishopacity=finishopacity， style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy)} 參數(shù)：Opacity參數(shù)代表圖象的起始透明度，其默認(rèn)的數(shù)值是從0到100，0代表完全透明，100代表完全不透明；FinishOpacity是一個(gè)可選參數(shù)，如果想要設(shè)置漸變的透明效果，就可以使用他們來指定結(jié)束時(shí)的透明度，作用范圍也是0到100；Style表示透明區(qū)域的形狀特征，其中“0”代表統(tǒng)一形狀，“1”代表線形?！?”代表放射狀，“3”代表矩形；startx表示漸變透明效果開始處的X坐標(biāo)，starty代表漸變透明效果開始處的Y坐標(biāo)，finishx代表漸變透明效果結(jié)束處的X坐標(biāo)，finishy代表漸變透明效果結(jié)束處的Y坐標(biāo)。

2、模糊濾鏡 作用：該濾鏡主要是讓圖象產(chǎn)生一種模糊效果。 語(yǔ)法：{filter:blur(add=add，direction=direction，strength=strength)} 參數(shù)：該濾鏡主要包括三個(gè)參數(shù)，其中add是用來指定圖象是否被改變成印象派的模糊效果，模糊效果是按順時(shí)針的方向進(jìn)行的，它的數(shù)值應(yīng)該是ture或false；direction參數(shù)是用來設(shè)置模糊的方向的，其中0度代表垂直向上，每45度為一個(gè)單位，默認(rèn)值是向左的270度；strength 參數(shù)代表有多少像素的寬度將受到模糊影響，缺省的參數(shù)值是5個(gè)像素，而且該參數(shù)值只能使用整數(shù)來指定。

3、斜影濾鏡 作用：該濾鏡主要是為對(duì)象建立輪廓的影子效果的，它可以在指定的方向建立物體的投影； 語(yǔ)法：{filter:shadow(color=color,direction=direction)} 參數(shù)：斜影濾鏡只有兩個(gè)參數(shù)，其中color代表投影的底色，該數(shù)值是用英文字母來代替的，例如投影底色是紅色的話，就應(yīng)該設(shè)置color=red;direction參數(shù)是用來設(shè)置投影方向的，如果該數(shù)值是0的話，就代表垂直投影，此外該數(shù)值每45度為一個(gè)單位，它的默認(rèn)值是向左的270度。

4、發(fā)光濾鏡 作用：該濾鏡可以給圖象或者文字產(chǎn)生一種發(fā)光效果； 語(yǔ)法：{filter:glow(color=color,strength=strength)} 參數(shù)：該濾鏡的color參數(shù)與陰影濾鏡的color參數(shù)功能幾乎是一樣的，不過這里的color參數(shù)是用來設(shè)置發(fā)光顏色的;strength參數(shù)是用來指定發(fā)光強(qiáng)度的，其值為1到255之間的任何整數(shù)。

5、燈光濾鏡 作用：燈光濾鏡是模擬光源來投射文字或者圖象，使圖象和文字能產(chǎn)生一定的投射效果； 語(yǔ)法：{filter:light} 參數(shù)：一旦為對(duì)象定義了“l(fā)ight"濾鏡屬性后，大家就可以調(diào)用它的“方法(Method)"來設(shè)置或者改變屬性，該濾鏡可用的方法有：AddAmbient方法是用來加入包圍光源的，AddCone方法是用來加入錐形光源的，MoveLight方法是用來移動(dòng)光源的，Changstrength方法是用來改變光源強(qiáng)度的，Changcolor方法是用來改變光的顏色的，Clear方法是用來清除所有光源的。

6、遮罩濾鏡 作用：該濾鏡可以為對(duì)象建立一個(gè)覆蓋于表面的膜，其效果就象戴著有色眼鏡看物體一樣。 語(yǔ)法： {filter:mask(color=color)} 參數(shù)：該濾鏡的color參數(shù)表示覆蓋對(duì)象表面的顏色，例如如果遮罩顏色為綠色，那么就應(yīng)該設(shè)置color=blue。

7、陰影濾鏡 作用：陰影濾鏡就是給對(duì)象添加陰影效果，其工作原理是建立一個(gè)偏移量，加上色彩。 語(yǔ)法：{filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive)} 參數(shù)：該濾鏡中的Color參數(shù)表示投射陰影的顏色，offx 表示水平方向陰影的偏移量，offy 表示豎直方向陰影的偏移量，Positive參數(shù)是一個(gè)布爾值，其數(shù)值如果為TRUE，就為任何的非透明像素建立可見的投影，如果為FASLE，就為透明的像素部分建立透明效果。

8、灰度濾鏡 作用：該濾鏡主要是將圖象對(duì)象轉(zhuǎn)換成灰度形式顯示。 語(yǔ)法：{filter:gray} 參數(shù)：該濾鏡沒有參數(shù)。

9、翻轉(zhuǎn)濾鏡 作用：翻轉(zhuǎn)濾鏡主要是實(shí)現(xiàn)圖象對(duì)象的水平或者豎直翻轉(zhuǎn)效果。 語(yǔ)法：{filter:filph} {filter:filpv} 參數(shù)：這種濾鏡也不帶參數(shù)，其中{filter:filph}是實(shí)現(xiàn)水平翻轉(zhuǎn)的，{filter:filpv} 是實(shí)現(xiàn)豎直翻轉(zhuǎn)的。

10、X光濾鏡 作用：X光濾鏡可以讓對(duì)象反映出它的輪廓并把這些輪廓加亮。 語(yǔ)法： {filter:xray} 參數(shù)：該濾鏡本身不含有參數(shù)。

11、倒置濾鏡 作用：使用該濾鏡可以把包括色彩、飽和度、和亮度值等對(duì)象的可視化屬性全部翻轉(zhuǎn)。 語(yǔ)法： {filter:invert} 參數(shù)：該濾鏡沒有參數(shù)。

12、波紋濾鏡 作用：波紋濾鏡可以在水平和豎直方向利用正弦波打亂圖象，使圖象產(chǎn)生水波效果。 語(yǔ)法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)} 參數(shù)：該濾鏡的add參數(shù)是一個(gè)布爾數(shù)值，它是用來表示是否要把對(duì)象按照波形樣式打亂；freq參數(shù)是用來設(shè)置波紋頻率的，也就是指定在對(duì)象上一共需要產(chǎn)生多少個(gè)完整的波紋；lightstrength參數(shù)可以設(shè)置波紋光影的增強(qiáng)效果的，其數(shù)值范圍在0到100之間；phase參數(shù)是用來設(shè)置正弦波的偏移量的，strength是設(shè)置正弦波的振幅大小的。

在IE下使用的濾鏡，可以實(shí)現(xiàn)很多不錯(cuò)的特效，但是在chrome和火狐opera等瀏覽器里這些就全都失效了，因?yàn)?濾鏡只是屬于IE瀏覽器開發(fā)下的功能，不支持IE內(nèi)核的瀏覽器也就都不支持這些濾鏡。 不過一般都支持透明濾鏡，只是寫法不一樣，如下：

所以要都支持這個(gè)濾鏡，就得兩個(gè)都寫上

二、圖片高級(jí)-透明圖片

（一）網(wǎng)頁(yè)上常用的圖片格式（jpg,png,gif）

支持透明：gif，png(png8,png24,png32)

（二）網(wǎng)頁(yè)上的圖片形式（插入圖片和背景圖）

（三）插入圖片透明

三、網(wǎng)頁(yè)上常用的圖片格式

1)jpg:有損壓縮格式，靠損失圖片本身的質(zhì)量來減小圖片的體積，適用于顏色豐富的圖像;(像素點(diǎn)組成的，像素點(diǎn)越多會(huì)越清晰 )

2）gif：有損壓縮格式，靠損失圖片的色彩數(shù)量來減小圖片的體積，支持透明，支持動(dòng)畫，適用于顏色數(shù)量較少的圖像;

3)png:有損壓縮格式，損失圖片的色彩數(shù)量來減小圖片的體積，支持透明，不支持動(dòng)畫，是fireworks的 源文件格式，適用于顏色數(shù)量較少的圖像;

A.圖片背景透明：

.gif：支持

.png8：支持(建議使用)

.png24:IE6不支持，其它內(nèi)核瀏覽器支持（PS制作)

.png32：IE6不支持，其它內(nèi)核瀏覽器支持

B.圖片本身透明

.png24:IE6不支持（ps制作)，可用filter兼容。

.png32：IE6不支持，可用filter兼容。

樣式：

<style type="text/css"> body{background:#000;} .alpha{display:none;_display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="url",sizingMethod="scale");width:value;height:value;} .ie6hidden{_display:none;}

</style>

結(jié)構(gòu)：

<span class="alpha"></span> <img class="ie6hidden" src="url" />