css中Alpha濾鏡的用法

2021-05-23 10:32:56 字數 1902 閱讀 2694

語法:

filter : progid:dximagetransform.microsoft.alpha ( enabled=benabled , style=istyle , opacity=iopacity , finishopacity=ifinishopacity , startx=ipercent , starty=ipercent , finishx=ipercent , finishy=ipercent )

屬性:

enabled  :  可選項。布林值(boolean)。設定或檢索濾鏡是否啟用。true | false true  :  預設值。濾鏡啟用。

false  :  濾鏡被禁止。

style  :  可選項。整數值(integer)。設定或檢索透明漸變的樣式。0 | 1 | 2 | 3 0  :  預設值。整體透明度。將 opacity 值均勻的作用於物件。

1  :  線性漸變透明度。從由 startx 和 starty 決定的點,由 opacity 決定的透明度開始,到由 finishx 和 finishy 決定的點,由 finishopacity 決定的透明度結束。 

2  :  圓形放射漸變透明度。圓形放射區域的圓心為物件的中心,圓周到與物件的邊相切為止。透明漸變由圓心開始,到圓周結束。開始透明度由 opacity 決定,結束透明度由 finishopacity 決定。

3  :  矩形放射漸變透明度。由物件的邊開始,到物件的中心結束。開始透明度由 opacity 決定,結束透明度由 finishopacity 決定。 

opacity  :  可選項。整數值(integer)。設定或檢索透明漸變的開始透明度。取值範圍為 0 - 100 。預設值為 0 ,即完全透明。 100 為完全不透明。 

finishopacity  :  可選項。整數值(integer)。設定或檢索透明漸變的結束透明度。取值範圍為 0 - 100 。預設值為 0 ,即完全透明。 100 為完全不透明。 

startx  :  可選項。整數值(integer)。設定或檢索透明漸變開始點的水平座標。其數值作為物件寬度的百分比值處理。預設值為 0 。 

starty  :  可選項。整數值(integer)。設定或檢索透明漸變開始點的垂直座標。其數值作為物件高度的百分比值處理。預設值為 0 。 

finishx  :  可選項。整數值(integer)。設定或檢索透明漸變結束點的水平座標。其數值作為物件寬度的百分比值處理。預設值為 0 。 

finishy  :  可選項。整數值(integer)。設定或檢索透明漸變結束點的垂直座標。其數值作為物件高度的百分比值處理。預設值為 0 。 

特性:

enabled  :  可讀寫。布林值(boolean)。參閱 enabled 屬性。

style  :  可讀寫。整數值(integer)。參閱 style 屬性。

opacity  :  可讀寫。整數值(integer)。參閱 opacity 屬性。

finishopacity  :  可讀寫。整數值(integer)。參閱 finishopacity 屬性。

startx  :  可讀寫。整數值(integer)。參閱 startx 屬性。

starty  :  可讀寫。整數值(integer)。參閱 starty 屬性。

finishx  :  可讀寫。整數值(integer)。參閱 finishx 屬性。

finishy  :  可讀寫。整數值(integer)。參閱 finishy 屬性。

說明:

調整物件內容的透明度。

你可以設定整體透明度,或線性漸變和放射漸變的透明度。

示例:

#iddiv

#iddiv

巧用CSS的alpha濾鏡

把 alpha 濾鏡載入到文字所在的 td 上,能產生一些奇妙的效果,請看下圖 圖1圖2 圖3上面的三種效果除 style 引數不同外,其它引數均相同。圖1的 是 alpha opacity 10,finishopacity 90,style 1,startx 0,starty 0,finishx ...

css3之透明濾鏡新用法

按照css2之前的濾鏡屬性opacity,會繼承到內容上,也就是說我們給乙個div設定了opacity 0.5,div裡的文字也會出現半透明效果。點此檢視demo。為了避免這種情況發生,我們不得不多增加乙個div,用來透明背景,而另外乙個放內容的div就不設背景,只要這2個div大小座標保持一致,且...

css3之透明濾鏡新用法

按照css2之前的濾鏡屬性opacity,會繼承到內容上,也就是說我們給乙個div設定了opacity 0.5,div裡的文字也會出現半透明效果。點此檢視demo。為了避免這種情況發生,我們不得不多增加乙個div,用來透明背景,而另外乙個放內容的div就不設背景,只要這2個div大小座標保持一致,且...