本篇內(nèi)容介紹了“css濾鏡效果有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都做網(wǎng)站、新野網(wǎng)絡(luò)推廣、小程序定制開(kāi)發(fā)、新野網(wǎng)絡(luò)營(yíng)銷(xiāo)、新野企業(yè)策劃、新野品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供新野建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

CSS樣式的filter（濾鏡效果）對(duì)HTML的一些標(biāo)記設(shè)置濾鏡效果。
黑白照片 filter: gray;
X光照片 filter: Xray;
風(fēng)動(dòng)模糊 filter: blur(add=true,direction=45,strength=30);
正弦波紋 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
線型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻轉(zhuǎn) filter: fliph;
垂直翻轉(zhuǎn) filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
馬賽克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
發(fā)光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);

柔邊效果 filter:alpha(opacity=100, finishOpacity=0,style=2

IE4.0以上支持的濾鏡屬性表

濾鏡效果 描述 ：
Alpha 設(shè)置透明度
Blru 建立模糊效果
Chroma 把指定的顏色設(shè)置為透明
DropShadow 建立一種偏移的影象輪廓，即投射陰影
FlipH 水平反轉(zhuǎn)
FlipV 垂直反轉(zhuǎn)
Glow 為對(duì)象的外邊界增加光效
Grayscale 降低圖片的彩色度
Invert 將色彩、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果
Light 在一個(gè)對(duì)象上進(jìn)行燈光投影
Mask 為一個(gè)對(duì)象建立透明膜
Shadow 建立一個(gè)對(duì)象的固體輪廓，即陰影效果
Wave 在X軸和Y軸方向利用正弦波紋打亂圖片
Xray 只顯示對(duì)象的輪廓


下面分別闡述：

1、Alpha 濾鏡

語(yǔ)法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}

'Alpha'屬性是把一個(gè)目標(biāo)元素與背景混合。設(shè)計(jì)者可以指定數(shù)值來(lái)控制混合的程度。這種“與背景混合”通俗地說(shuō)

就是一個(gè)元素的透明度。通過(guò)指定坐標(biāo)，可以指定點(diǎn)、線、面的透明度。他們的參數(shù)含義分別如下：

“opacity'代表透明度水準(zhǔn)。默認(rèn)的范圍是從0 到 100，他們其實(shí)是百分比的形式。也就是說(shuō)，0代表完全透明，

100代表完全不透明?！眆inishopacity'是一個(gè)可選參數(shù)，如果想要設(shè)置漸變的透明效果，就可以使用他們來(lái)指定

結(jié)束時(shí)的透明度。范圍也是0 到 100?！皊tyle' 參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀、1代表線形、2代表放射狀

、3代表長(zhǎng)方形。”STARTX“和”STARTY“代表漸變透明效果的開(kāi)始X和Y坐標(biāo)。”

FINISHX“和”FINISHY“代表漸變透明效果結(jié)束X和Y 的坐標(biāo)。

2、Blur 濾鏡

語(yǔ)法：對(duì)于HTML：{filter:blur(add=add,direction=direction,strength=strength)}
對(duì)于Script語(yǔ)言： [oblurfilter=] object.filters.blur
用手指在一幅尚未干透的油畫(huà)上迅速劃過(guò)時(shí)，畫(huà)面就會(huì)變得模糊。”Blur'就是產(chǎn)生同樣的模糊效果。

“ADD”參數(shù)是一個(gè)布爾判斷“TRUE（默認(rèn)）”或者“FALSE”。它指定圖片是否被改變成印象派的模糊

效果。模糊效果是按順時(shí)針的方向進(jìn)行的，“DIRECTION”參數(shù)用來(lái)設(shè)置模糊的方向。其中0度代表垂直

向上，然后每45度為一個(gè)單位。它的默認(rèn)值是向左的270度?！癝TRENGTH“值只能使用整數(shù)來(lái)指定，

她代表有多少像素的寬度將受到模糊影響。默認(rèn)是5個(gè)。

3、FlipH, FlipV 濾鏡

語(yǔ)法：{filter:filph} ,{filter:filpv} 分別是水平反轉(zhuǎn)和垂直反轉(zhuǎn)

4、Chroma 濾鏡

語(yǔ)法：{filter:chroma(color=color)}
使用”Chroma'屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色，參數(shù)COLOR即要透明的顏色。

5、DropShadow 濾鏡

語(yǔ)法：{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}

“DropShaow'顧名思義就是添加對(duì)象的陰影效果。其工作原理是建立一個(gè)偏移量，加上較深。

'Color'代表投射陰影的顏色，'offx'和'offy'分別是X方向和Y方向陰影的餓偏移量。

'Positive'參數(shù)是一個(gè)布爾值，如果為“TRUE（非0）”，那么就為任何的非透明像素建立可見(jiàn)的投影。

如果為“FASLE（0）”，那么就為透明的像素部分建立透明效果 代碼如下：

dropshadow(color=gray,offx=5,offy=5.positive=0)

6、Glow 濾鏡

語(yǔ)法：{filter:glow(color=color,strength)}

當(dāng)對(duì)一個(gè)對(duì)象使用'glow'屬性后，這個(gè)對(duì)象的邊緣就會(huì)產(chǎn)生類(lèi)似發(fā)光的效果?！癈OLOR”是指定

發(fā)光的顏色，“STRENGTH”則是強(qiáng)度的表現(xiàn)，可以從1到255之間的任何整數(shù)來(lái)指定這個(gè)力度。
filter:glow(color=red,strength=10) 后的效果

filter:glow(color=#ffff00,strength=5) 后的效果

7、Gray ,Invert,Xray 濾鏡

語(yǔ)法：{filter:gray} ,{filter:invert},{filter:xray}

Gray濾鏡是把一張圖片變成灰度圖；（汶川大地震后很多網(wǎng)站色調(diào)都變灰色，就是用的這一點(diǎn)代碼實(shí)現(xiàn)的）
Invert濾鏡是把對(duì)象的可視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度、和亮度值；
Xray濾鏡是讓對(duì)象反映出它的輪廓并把這些輪廓加亮，也就是所謂的“X”光片。

8、Light 濾鏡

語(yǔ)法：Filter{light}

這個(gè)屬性模擬光源的投射效果。一旦為對(duì)象定義了“LIGHT'濾鏡屬性，那么就可以調(diào)用它的“方法(Method)'來(lái)設(shè)置或者改變屬性?！癓IGHT'可用的方法有：

·AddAmbient 加入包圍的光源
·AddCone 加入錐形光源
·AddPoint 加入點(diǎn)光源
·Changcolor 改變光的顏色
·Changstrength 改變光源的強(qiáng)度
·Clear 清除所有的光源
·MoveLight 移動(dòng)光源

addAmbient (iRed,iGreen,iBlue,iStrength) : 為濾鏡添加環(huán)境光。環(huán)境光是無(wú)方向的，并且均勻的灑在頁(yè)面的表面。環(huán)境光有顏色和強(qiáng)度值，可以為對(duì)象田家更多的顏色。它通

常和其他光一起使用。無(wú)返回值。參數(shù)見(jiàn)下表。
iRed : 必選項(xiàng)。整數(shù)值(Integer)。 指定紅色值。取值范圍為 0 - 255 。
iGreen : 必選項(xiàng)。整數(shù)值(Integer)。 指定綠色值。取值范圍為 0 - 255 。
iBlue : 必選項(xiàng)。整數(shù)值(Integer)。 指定藍(lán)色值。取值范圍為 0 - 255 。
iStrength : 必選項(xiàng)。整數(shù)值(Integer)。 指定光強(qiáng)度。取值范圍為 0 - 100 。

changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute) : 改變光的顏色。無(wú)返回值。參數(shù)見(jiàn)下表。
iLightNumber : 必選項(xiàng)。整數(shù)值(Integer)。 指定光的標(biāo)識(shí)符。
iRed : 必選項(xiàng)。整數(shù)值(Integer)。指定紅色值。取值范圍為 0 - 255 。
iGreen : 必選項(xiàng)。整數(shù)值(Integer)。指定綠色值。取值范圍為 0 - 255 。
iBlue : 必選項(xiàng)。整數(shù)值(Integer)。指定藍(lán)色值。取值范圍為 0 - 255 。
fAbsolute : 必選項(xiàng)。布爾值(Boolean)。指定改變是替換當(dāng)前設(shè)置的絕對(duì)值，還是加到當(dāng)前設(shè)置的相對(duì)值。此參數(shù)不等于零表示采用絕對(duì)值。否則表示采用相對(duì)值。


可以定義光源的虛擬位置，以及通過(guò)調(diào)整X軸和Y軸的數(shù)值來(lái)控制光源焦點(diǎn)的位置，還可以調(diào)整光源的形式（點(diǎn)光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬

性。如果動(dòng)態(tài)的設(shè)置光源，可能回產(chǎn)生一些意想不到的效果。

9、Mask 濾鏡

語(yǔ)法：{filter:mask(color=color)}

使用'MASK'屬性可以為對(duì)象建立一個(gè)覆蓋于表面的膜，其效果就象戴者有色眼鏡看物體一樣。

10、Shadow 濾鏡

語(yǔ)法：{filter:shadow(color=color,direction=direction)}

利用“Shadow”屬性可以在指定的方向建立物體的投影，COLOR是投影色，DIRECTION是設(shè)置投影的方向。其中0度代表垂直向上，然后每45度為一個(gè)單位。它的默認(rèn)值是向左的270度。

11、Wave 濾鏡 語(yǔ)法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}

'wave' 屬性把對(duì)象按垂直的波形樣式打亂。默認(rèn)是“TRUE（非0）”，
“ADD”表示是否要把對(duì)象按照波形樣式打亂，
“FREQ”是波紋的頻率，也就是指定在對(duì)象上一共需要產(chǎn)生多少個(gè)完整的波紋，
“LIGHTSTRENGTH”參數(shù)可以對(duì)于波紋增強(qiáng)光影的效果，范圍0----100，
“PHASE”參數(shù)用來(lái)設(shè)置正弦波的偏移量。
“STRENGTH”代表振幅大小。

控制div層背景半透明

var container = document.getElementById("map");

container.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
container.style.opacity = "0.1";

或者：

container.style.filter = "Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140)";

img.style.filter = "Alpha(Opacity=50)"; //IE中 設(shè)置地圖透明

img.style.MozOpacity = 0.5; //火狐中 設(shè)置地圖透明度

“css濾鏡效果有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！