本篇內(nèi)容主要講解“如何理解CSS中filter濾鏡”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何理解CSS中filter濾鏡”吧!

成都創(chuàng)新互聯(lián)主要業(yè)務(wù)有網(wǎng)站營(yíng)銷策劃、網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、微信平臺(tái)小程序開(kāi)發(fā)、H5開(kāi)發(fā)、程序開(kāi)發(fā)等業(yè)務(wù)。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當(dāng)客戶，還把客戶視為我們的合作伙伴，在開(kāi)展業(yè)務(wù)的過(guò)程中，公司還積累了豐富的行業(yè)經(jīng)驗(yàn)、成都營(yíng)銷網(wǎng)站建設(shè)資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務(wù)和保障體系。 

1．CSS靜態(tài)濾鏡樣式（filter）（只有IE4.0以上支持）

CSS靜態(tài)濾鏡樣式的使用方法：{ filter : filtername( parameters1, parameters2, ...) }

Filter樣式 簡(jiǎn)要說(shuō)明 支持參數(shù)
alpha 設(shè)置圖片或文字的不透明度 opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength
blur 在指定的方向和位置上產(chǎn)生動(dòng)感模糊效果 add、direction、strength
chroma 對(duì)所選擇的顏色進(jìn)行透明處理 color
dropShadow 在指定的方向和位置上產(chǎn)生陰影 color、offX、offY、positive
flipH 沿水平方向翻轉(zhuǎn)對(duì)象 　
flipV 沿垂直方向翻轉(zhuǎn)對(duì)象 　
glow 在對(duì)象周圍上發(fā)光 color、strength
gray 將對(duì)象以灰度處理 　
invert 逆轉(zhuǎn)對(duì)象顏色 　
light 對(duì)對(duì)象進(jìn)行模擬光照 　
mask 對(duì)對(duì)象生成掩膜 color
shadow 沿對(duì)象邊緣產(chǎn)生陰影 color、direction
wave 在垂直方向產(chǎn)生正弦波形 add、freq、lightStrength、phase、strength
xray 改變對(duì)象顏色深度，并繪制黑白圖象 　

以上就是靜態(tài)濾鏡的全部?jī)?nèi)容，要注意的是CSS是區(qū)分大小寫(xiě)的！

2．CSS動(dòng)態(tài)濾鏡

動(dòng)態(tài)濾鏡可以為頁(yè)面添加動(dòng)人的淡入淡出、圖象轉(zhuǎn)化效果，它可以分為兩種blend（混合）和reveal（顯示），前者可以使對(duì)象漸漸消失或出現(xiàn)，后者提供了24種圖象轉(zhuǎn)化的效果。對(duì)于動(dòng)態(tài)濾鏡的調(diào)用除去象在靜態(tài)濾鏡中要定義的濾鏡類型，參數(shù)等等，還用到腳本語(yǔ)言控制它的狀態(tài)。
首先，在開(kāi)始一個(gè)動(dòng)態(tài)效果之前，先需要進(jìn)行裝備（Apply），然后播放（Play）動(dòng)態(tài)效果，在動(dòng)態(tài)效果進(jìn)行中還可以中斷動(dòng)態(tài)效果（Stop），以上可以用下面的方法實(shí)現(xiàn)：
　　對(duì)象名.filters(濾鏡數(shù)值).Apply()
　　對(duì)象名.filters(濾鏡數(shù)值).Play()
　　對(duì)象名.filters(濾鏡數(shù)值).Stop()
對(duì)于濾鏡狀態(tài)的判斷可以通過(guò)“對(duì)象名.filters(濾鏡數(shù)值).status”判斷，該值為0時(shí)，表示濾鏡未執(zhí)行，為1時(shí)，表示濾鏡已經(jīng)完成，為2時(shí)表示濾鏡在執(zhí)行中。
在定義filter時(shí)，如上面所提到的，可以有混合（“filter:blendTrans(duration=時(shí)間數(shù)值)”，duration表示濾鏡執(zhí)行需要的時(shí)間，單位為秒）和顯示（“filter:revealTrans(duration=時(shí)間數(shù)值,transition=過(guò)渡類型)”，過(guò)渡類型為從0－23的數(shù)值）兩種。

濾鏡目前還未被W3C正式承認(rèn)。濾鏡只是微軟IE瀏覽器的組成部分，不能用于Netscape瀏覽器。制定有關(guān)標(biāo)準(zhǔn)的組織正在就此進(jìn)行討論，但尚未達(dá)成最后定論。在我看來(lái)，濾鏡是一種非常有趣而且是制作精彩的視覺(jué)效果必不可少的一部分。濾鏡能節(jié)省帶寬，而且是你能在制作奇妙的
視覺(jué)設(shè)計(jì)時(shí)使用文字格式，而不必先制作龐大的文字位圖以取得相同的效果。
但由于這些功能尚未成為HTML的正式組成部分，所以并不是所有的瀏覽器都能看到這些特色。有些時(shí)候，你必須考慮以傳統(tǒng)的方式制作相同的效果，當(dāng)然，你不得不繼續(xù)將龐大的GIF文件塞到網(wǎng)頁(yè)之中。
沉默...沉默...

CSS濾鏡filter詳解

語(yǔ)法：STYLE="filter:filtername(fparameter1, fparameter2...)"
（Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數(shù)）

濾鏡說(shuō)明：
alpha：設(shè)置透明層次
blur：創(chuàng)建高速度移動(dòng)效果，即模糊效果
chroma：制作專用顏色透明
DropShadow：創(chuàng)建對(duì)象的固定影子
FlipH：創(chuàng)建水平鏡像圖片
FlipV：創(chuàng)建垂直鏡像圖片
glow：加光輝在附近對(duì)象的邊外
gray：把圖片灰度化
invert：反色
light：創(chuàng)建光源在對(duì)象上
mask：創(chuàng)建透明掩膜在對(duì)象上
shadow：創(chuàng)建偏移固定影子
wave：波紋效果
Xray：使對(duì)象變得像被x光照射一樣

1、濾鏡：Alpha
語(yǔ)法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，F(xiàn)inishX=finishX，F(xiàn)inishY=finishY)"
說(shuō)明：
Opacity：起始值，取值為0～100, 0為透明，100為原圖。
FinishOpacity：目標(biāo)值。
Style：1或2或3
StartX：任意值
StartY：任意值
例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

2、濾鏡：blur
語(yǔ)法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
說(shuō)明：
Add：一般為1，或0。
Direction：角度，0～315度，步長(zhǎng)為45度。
Strength：效果增長(zhǎng)的數(shù)值，一般5即可。
例子：filter:Blur(Add="1",Direction="45",Strength="5")

3、濾鏡：Chroma
語(yǔ)法：STYLE="filter:Chroma(Color = color)"
說(shuō)明：color：#rrggbb格式，任意。
例子：filter:Chroma(Color="#FFFFFF")

4、濾鏡：DropShadow
語(yǔ)法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
說(shuō)明：Color:#rrggbb格式，任意。
Offx：X軸偏離值。
Offy：Y軸偏離值。
Positive：1或0。
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5、濾鏡：FlipH
語(yǔ)法：STYLE="filter:FlipH"
例子：filter:FlipH

6、濾鏡：FlipV
語(yǔ)法：STYLE="filter:FlipV"
例子：filter:FlipV

7、濾鏡：glow
語(yǔ)法：STYLE="filter:Glow(Color=color, Strength=strength)"
說(shuō)明：
Color：發(fā)光顏色。
Strength：強(qiáng)度(0－100)
例子：filter:Glow(Color="#6699CC",Strength="5")

8、濾鏡：gray
語(yǔ)法：STYLE="filter:Gray"
例子：filter:Gray

9、濾鏡：invert
語(yǔ)法：STYLE="filter:Invert"
例子：filter:Invert

10、濾鏡：mask
語(yǔ)法：STYLE="filter:Mask(Color=color)"
例子：filter:Mask (Color="#FFFFE0")

11、濾鏡：shadow
語(yǔ)法：filter:Shadow(Color=color, Direction=direction)
說(shuō)明：
Color：#rrggbb格式。
Direction：角度，0－315度，步長(zhǎng)為45度。
例子：filter:Shadow (Color="#6699CC", Direction="135")

12、濾鏡：wave
語(yǔ)法：filter: Wave(Add=add，F(xiàn)req=freq，LightStrength=strength，Phase=phase， Strength=strength)
說(shuō)明：
Add：一般為1，或0。
Freq：變形值。
LightStrength：變形百分比。
Phase：角度變形百分比。
Strength：變形強(qiáng)度。
例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13、濾鏡：Xray
語(yǔ)法：STYLE="filter:Xray"
例子：filter:Xray

到此，相信大家對(duì)“如何理解CSS中filter濾鏡”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文名稱：如何理解CSS中filter濾鏡
網(wǎng)站鏈接：http://chinadenli.net/article24/gishje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、虛擬主機(jī)、App開(kāi)發(fā)、微信公眾號(hào)、定制網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)