CSS教學(七) 濾鏡
- 巴扎黑原創
- 2017-04-01 14:22:251778瀏覽
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。
注意：如果做頁間的切換效果，可以在
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中文網其他相關文章！