DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css 濾鏡效果主要對HTML標記設置濾鏡效果
css 濾鏡效果主要對HTML標記設置濾鏡效果
編輯:CSS詳解     
CSS樣式的filter(濾鏡效果)對Html的一些標記設置濾鏡效果,下面主要為大家介紹下IE4.0以上支持的濾鏡屬性表及一些常用濾鏡效果

CSS樣式的filter(濾鏡效果)對Html的一些標記設置濾鏡效果。
黑白照片 filter: gray;
X光照片 filter: Xray;
風動模糊 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;
左右翻轉 filter: fliph;
垂直翻轉 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
馬賽克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
發光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);

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

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

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


下面分別闡述:

1、Alpha 濾鏡

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

'Alpha'屬性是把一個目標元素與背景混合。設計者可以指定數值來控制混合的程度。這種“與背景混合”通俗地說

就是一個元素的透明度。通過指定坐標,可以指定點、線、面的透明度。他們的參數含義分別如下:

“opacity'代表透明度水准。默認的范圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,

100代表完全不透明。”finishopacity'是一個可選參數,如果想要設置漸變的透明效果,就可以使用他們來指定

結束時的透明度。范圍也是0 到 100。“style' 參數指定了透明區域的形狀特征。其中0代表統一形狀、1代表線形、2代表放射狀

、3代表長方形。”STARTX“和”STARTY“代表漸變透明效果的開始X和Y坐標。”

FINISHX“和”FINISHY“代表漸變透明效果結束X和Y 的坐標。

2、Blur 濾鏡

語法:對於Html:{filter:blur(add=add,direction=direction,strength=strength)}
對於Script語言: [oblurfilter=] object.filters.blur
用手指在一幅尚未干透的油畫上迅速劃過時,畫面就會變得模糊。”Blur'就是產生同樣的模糊效果。

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

效果。模糊效果是按順時針的方向進行的,“DIRECTION”參數用來設置模糊的方向。其中0度代表垂直

向上,然後每45度為一個單位。它的默認值是向左的270度。“STRENGTH“值只能使用整數來指定,

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

3、FlipH, FlipV 濾鏡

語法:{filter:filph} ,{filter:filpv} 分別是水平反轉和垂直反轉

4、Chroma 濾鏡

語法:{filter:chroma(color=color)}
使用”Chroma'屬性可以設置一個對象中指定的顏色為透明色,參數COLOR即要透明的顏色。

5、DropShadow 濾鏡

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

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

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

'Positive'參數是一個布爾值,如果為“TRUE(非0)”,那麼就為任何的非透明像素建立可見的投影。

如果為“FASLE(0)”,那麼就為透明的像素部分建立透明效果 代碼如下:

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

6、Glow 濾鏡

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

當對一個對象使用'glow'屬性後,這個對象的邊緣就會產生類似發光的效果。“COLOR”是指定

發光的顏色,“STRENGTH”則是強度的表現,可以從1到255之間的任何整數來指定這個力度。
filter:glow(color=red,strength=10) 後的效果

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

7、Gray ,Invert,Xray 濾鏡

語法:{filter:gray} ,{filter:invert},{filter:xray}

Gray濾鏡是把一張圖片變成灰度圖;(汶川大地震後很多網站色調都變灰色,就是用的這一點代碼實現的)
Invert濾鏡是把對象的可視化屬性全部翻轉,包括色彩、飽和度、和亮度值;
Xray濾鏡是讓對象反映出它的輪廓並把這些輪廓加亮,也就是所謂的“X”光片。

8、Light 濾鏡

語法:Filter{light}

這個屬性模擬光源的投射效果。一旦為對象定義了“LIGHT'濾鏡屬性,那麼就可以調用它的“方法(Method)'來設置或者改變屬性。“LIGHT'可用的方法有:

·AddAmbIEnt 加入包圍的光源
·AddCone 加入錐形光源
·AddPoint 加入點光源
·Changcolor 改變光的顏色
·Changstrength 改變光源的強度
·Clear 清除所有的光源
·MoveLight 移動光源

addAmbIEnt (iRed,iGreen,iBlue,iStrength) : 為濾鏡添加環境光。環境光是無方向的,並且均勻的灑在頁面的表面。環境光有顏色和強度值,可以為對象田家更多的顏色。它通

常和其他光一起使用。無返回值。參數見下表。
iRed : 必選項。整數值(Integer)。 指定紅色值。取值范圍為 0 - 255 。
iGreen : 必選項。整數值(Integer)。 指定綠色值。取值范圍為 0 - 255 。
iBlue : 必選項。整數值(Integer)。 指定藍色值。取值范圍為 0 - 255 。
iStrength : 必選項。整數值(Integer)。 指定光強度。取值范圍為 0 - 100 。

changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute) : 改變光的顏色。無返回值。參數見下表。
iLightNumber : 必選項。整數值(Integer)。 指定光的標識符。
iRed : 必選項。整數值(Integer)。指定紅色值。取值范圍為 0 - 255 。
iGreen : 必選項。整數值(Integer)。指定綠色值。取值范圍為 0 - 255 。
iBlue : 必選項。整數值(Integer)。指定藍色值。取值范圍為 0 - 255 。
fAbsolute : 必選項。布爾值(Boolean)。指定改變是替換當前設置的絕對值,還是加到當前設置的相對值。此參數不等於零表示采用絕對值。否則表示采用相對值。


可以定義光源的虛擬位置,以及通過調整X軸和Y軸的數值來控制光源焦點的位置,還可以調整光源的形式(點光源或者錐形光源)指定光源是否模糊邊界、光源的顏色、亮度等屬

性。如果動態的設置光源,可能回產生一些意想不到的效果。

9、Mask 濾鏡

語法:{filter:mask(color=color)}

使用'MASK'屬性可以為對象建立一個覆蓋於表面的膜,其效果就象戴者有色眼鏡看物體一樣。

10、Shadow 濾鏡

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

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

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

'wave' 屬性把對象按垂直的波形樣式打亂。默認是“TRUE(非0)”,
“ADD”表示是否要把對象按照波形樣式打亂,
“FREQ”是波紋的頻率,也就是指定在對象上一共需要產生多少個完整的波紋,
“LIGHTSTRENGTH”參數可以對於波紋增強光影的效果,范圍0----100,
“PHASE”參數用來設置正弦波的偏移量。
“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中 設置地圖透明

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved