CSS教學(七) 濾鏡

CSS提供了一些內建的多媒體濾鏡特效，使用這種技術可以把可視化的濾鏡和轉換效果添加到一個標準的HTML元素上，例如圖片、文字容器、以及其他一些物件。 Dreamweaver4提供了16種濾鏡可供選擇，如下圖：

下面，我們就來看看在Dreamweaver4裡如何方便的使用這些CSS濾鏡。

建立一個自訂樣式“.filter”，在Filter下拉框裡選Alpha濾鏡，我們將“Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY=? , FinishX=?, FinishY=?)」的Opacity參數設為50，後面的參數都刪掉，如下圖：

按OK後就建立了一個「.filter」的自訂樣式，我們把這個樣式應用到圖片上，圖片就是半透明的了。如果把這個樣式應用在表格上，表格也變成了半透明狀態了。注意所有濾鏡效果都要在瀏覽器中才能看到。以下是原碼：



注意：這個範例我們沒有用到後面的幾個參數，只用到Opacity參數，所以將其他參數刪掉。

下面我們來說明每個濾鏡的效果和參數：

1. Alpha：設定透明度

Alpha(Opacity=?, FinishOpacity=?, style=? , StartX=?, StartY=?, FinishX=?, FinishY=?)

#Opacity：透明度級別，範圍是0-100，0代表完全透明，100代表完全不透明。

FinishOpacity：設定漸層的透明效果時，用來指定結束時的透明度，範圍也是0 到 100。

style：設定漸層透明的樣式，數值為0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。

StartX和StartY：代表漸層透明效果的開始X和Y座標。

FinishX和FinishY：代表漸層透明效果結束X和Y 的座標。

2. BlendTrans：影像之間的淡入和淡出的效果

BlendTrans(Duration=?)

Duration：淡入或淡出的時間。

注意：這個濾鏡必須配合JS建立圖片序列，才能做出影像間效果。

3. Blru：建立模糊效果

Blur(Add=?, Direction=?, Strength=?)

Add：是否單方向模糊，此參數是一個布林值，true（非0）或false（0）。

Direction：設定模糊的方向，其中0度代表垂直向上，然後每45度為一個單位。

Strength：代表模糊的像素值。

4. Chroma：把指定的顏色設定為透明

Chroma(Color=?)

Color：是指要設定為透明的顏色。

5. DropShadow：建立陰影效果

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Color：指定陰影的顏色。

OffX：指定陰影相對於元素在水平方向偏移量，整數。

OffY：指定陰影相對於元素在垂直方向偏移量，整數。

Positive：是一個布林值，值為true（非0）時，表示為建立外陰影；為false(0)，表示為建立內陰影。

6. FlipH：將元素水平反轉

7. FlipV：將元素垂直反轉

8. Glow：建立外發光效效果

Glow(Color=?, Strength=?)

Color：是指定發光的顏色。 Strength：光的強度，可以是1到255之間的任何整數，數字越大，發光的範圍就越大。

9. Gray：去掉影像的色彩，顯示為黑白圖象

10. Invert：反轉圖象的顏色，產生類似底片的效果
##11. Light：放置光源的效果，可用來模擬光源在物體上的投影效果

#注意：此效果需要用JS設定光的位置和強度。

12. Mask：建立透明遮罩

Mask(Color=?)

Color：設定底色，讓物件遮住底色的部分透明。

13. RevealTrans：建立切換效果

RevealTrans(Duration=?, Transition=?)

Duration：是切換時間，以秒為單位。

Transtition：是切換方式，可設定為從0到23。

注意：如果做頁間的切換效果，可以在區加上一行程式碼：。如果用在頁面裡的元素必須配合JS使用。

14. Shadow：建立另一個陰影效果

Shadow(Color=?, Direction=?)

Color：是指陰影的顏色。

Direction：是設定投影的方向，0度代表垂直向上，然後每45度為一個單位。

15. Wave：波紋效果

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

#Add：表示是否顯示原對象，0表示不顯示，非0表示要顯示原對象。

Freq：設定波動的個數。

LightStrength：設定波浪效果的光照強度，從0到100。0表示最弱，100表示​​最強。

Phase：波浪的起始相位角。從0到100的百分數值。 （例如：25相當於90度，而50相當於180度。）

Strength：設定波浪搖擺的幅度。

16. Xray：顯現圖片的輪廓，X光片效果

注意：在使用CSS濾鏡時，必須使用在有區域的元素，例如表格，圖片等。而文本，段落這樣沒有區域的元素不能使用CSS濾鏡，對這樣的元素我們可以設定元素的Height和Width樣式或座標來實現。

看下面這個例子，我們對一行文字做陰影效果（dropshadow），新建自訂樣式.shadow，在filter下拉框裡選擇「DropShadow(Color=?, OffX=?, OffY=?, Positive=?)”，我們設定為“DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)”。然後把定義好的樣式套用在頁面中，我們發現表格裡的文字有了陰影，而段落裡的文字卻沒有陰影。點CSS styles面板裡的編輯樣式表按鈕，為樣式加上Hight屬性：

為了不影響原來物件的高度，我們設定的高度不能超過字體本身的高度。 OK後，在瀏覽器中可以看到段落裡的文字也有陰影了。

以上是CSS教學(七) 濾鏡的詳細內容。更多資訊請關注PHP中文網其他相關文章！