亚洲中文字幕网站你懂得_2021最新国产va在线_91精品国产91久久综合_AV东京热综合操

css濾鏡的兼容性如何實(shí)現(xiàn)?

發(fā)布時(shí)間:2014-04-17 發(fā)布者: 點(diǎn)擊:

首頁>建站常識(shí)

CSS濾鏡對(duì)于一些技術(shù)人員來說也是一項(xiàng)頭疼的問題,那么我們?cè)鯓硬拍鼙WCCSS濾鏡在各瀏覽器上的正常使用呢?想解決這個(gè)問題的朋友就和小編一起來學(xué)習(xí)下吧! 一、什么是樣式表濾鏡  其實(shí)濾鏡并不是對(duì)圖像進(jìn)行了什么處理,而是在瀏覽器中對(duì)使用了該屬性的對(duì)象進(jìn)行一定的修飾。樣式表濾鏡實(shí)際上是樣式表一個(gè)新的擴(kuò)展部分,使用這種技術(shù)簡單的語法就可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個(gè)標(biāo)準(zhǔn)的html元素上,例如圖片、文本、以及其他一些對(duì)象,為頁面添加一些豐富的變化。如果大家有一些腳本語言的基礎(chǔ),能夠把濾鏡效果與類似javascript的腳本代碼做一些結(jié)合,就可以擁有一個(gè)在樣式表濾鏡與腳本共同作用下建立的強(qiáng)大的動(dòng)態(tài)交互文檔工具,F(xiàn)在能使用的濾鏡有13個(gè)之多,不過要欣賞到這些濾鏡的特效,必須要求用戶的瀏覽器必須在IE4.0/NC6.0之上,因?yàn)橹挥羞@些版本的瀏覽器才能支持樣式表濾鏡效果。 二、常用的樣式表濾鏡  隨著樣式表技術(shù)的不斷改進(jìn),其濾鏡功能和種類也在不斷增多。如果用戶能夠熟練地混合使用它們,將可以產(chǎn)生意想不到的效果。在操作上,用戶只需要了解具體濾鏡的實(shí)際效果后,就能根據(jù)實(shí)際進(jìn)行微調(diào)了。為了讓大家能有針對(duì)性地使用濾鏡,下面小編就把一些常用濾鏡的功能和參數(shù)詳細(xì)介紹如下: 1、模糊濾鏡作用:該濾鏡主要是讓圖象產(chǎn)生一種模糊效果。語法:{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ù)來指定。 2、遮罩濾鏡作用:該濾鏡可以為對(duì)象建立一個(gè)覆蓋于表面的膜,其效果就象戴著有色眼鏡看物體一樣。語法: {filter:mask(color=color)} 參數(shù):該濾鏡的color參數(shù)表示覆蓋對(duì)象表面的顏色,例如如果遮罩顏色為綠色,那么就應(yīng)該設(shè)置color=blue。 3、α濾鏡作用:該濾鏡可以實(shí)現(xiàn)各種溶入效果,如果大家將該濾鏡與網(wǎng)頁腳本語言結(jié)合起來,對(duì)濾鏡的參數(shù)進(jìn)行處理的話,就能很輕易地做出淡入淡出的效果來。語法:{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"代表線形。"2"代表放射狀,"3"代表矩形;startx表示漸變透明效果開始處的X坐標(biāo),starty代表漸變透明效果開始處的Y坐標(biāo),finishx代表漸變透明效果結(jié)束處的X坐標(biāo),finishy代表漸變透明效果結(jié)束處的Y坐標(biāo)。 4、發(fā)光濾鏡作用:該濾鏡可以給圖象或者文字產(chǎn)生一種發(fā)光效果;語法:{filter:glow(color=color,strength=strength)} 參數(shù):該濾鏡的color參數(shù)與陰影濾鏡的color參數(shù)功能幾乎是一樣的,不過這里的color參數(shù)是用來設(shè)置發(fā)光顏色的;strength參數(shù)是用來指定發(fā)光強(qiáng)度的,其值為1到255之間的任何整數(shù)。 5、斜影濾鏡作用:該濾鏡主要是為對(duì)象建立輪廓的影子效果的,它可以在指定的方向建立物體的投影;語法:{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度。 6、燈光濾鏡作用:燈光濾鏡是模擬光源來投射文字或者圖象,使圖象和文字能產(chǎn)生一定的投射效果;語法:{filter:light} 參數(shù):一旦為對(duì)象定義了"light"濾鏡屬性后,大家就可以調(diào)用它的"方法(Method)"來設(shè)置或者改變屬性,該濾鏡可用的方法有:AddAmbient方法是用來加入包圍光源的,AddCone方法是用來加入錐形光源的,MoveLight方法是用來移動(dòng)光源的,Changstrength方法是用來改變光源強(qiáng)度的,Changcolor方法是用來改變光的顏色的,Clear方法是用來清除所有光源的。 7、陰影濾鏡作用:陰影濾鏡就是給對(duì)象添加陰影效果,其工作原理是建立一個(gè)偏移量,加上色彩。語法:{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)換成灰度形式顯示。語法:{filter:gray} 參數(shù):該濾鏡沒有參數(shù)。 9、倒置濾鏡作用:使用該濾鏡可以把包括色彩、飽和度、和亮度值等對(duì)象的可視化屬性全部翻轉(zhuǎn)。語法: {filter:invert} 參數(shù):該濾鏡沒有參數(shù)。 10、翻轉(zhuǎn)濾鏡作用:翻轉(zhuǎn)濾鏡主要是實(shí)現(xiàn)圖象對(duì)象的水平或者豎直翻轉(zhuǎn)效果。語法:{filter:filph} {filter:filpv} 參數(shù):這種濾鏡也不帶參數(shù),其中{filter:filph}是實(shí)現(xiàn)水平翻轉(zhuǎn)的,{filter:filpv} 是實(shí)現(xiàn)豎直翻轉(zhuǎn)的。 11、X光濾鏡作用:X光濾鏡可以讓對(duì)象反映出它的輪廓并把這些輪廓加亮。語法: {filter:xray} 參數(shù):該濾鏡本身不含有參數(shù)。 12、波紋濾鏡作用:波紋濾鏡可以在水平和豎直方向利用正弦波打亂圖象,使圖象產(chǎn)生水波效果。語法:{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è)置正弦波的振幅大小的。