Dreamweaver MX 2004 CSS使用教程之CSS濾鏡介紹

css|dreamweaver|教程|濾鏡

　　本站原創內容,轉載請註明出處網頁教學網。

　　 十.CSS 濾境的詳細介紹1

　　ALPHA 屬性

　　【Alpha濾鏡屬性】這個名字，在Flash和Photoshop經常見到。它們的作用基本類似，就是把一個目標元素與背景混合。你可以指定數值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定座標，可以指定點、線、面的透明度。由於“Alpha”濾鏡的參數多，我們先來看一下下圖：

　　“opacity”：代表透明度程度。範圍是從0~100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。

　　“finishopacity”：是一個選擇性參數，如果想要設定漸層的透明效果，就可以使用他們來指定結束時的透明度。範圍也是0 到 100。

　　“style”：指定了透明地區的形狀特徵。其中0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。

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

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

　　BLENDTRANS 屬性

　　【BlendTrans屬性】淡入淡出的效果濾鏡，能產生極精細的圖片轉換效果。

BlendTrans濾鏡功能也比較單一，只有一個參數：Duration（變換時間）。需要藉助於 Javascript來調用它的方法來實現轉換功能。使用BlendTrans濾鏡，首先您要準備幾張寬高尺 寸相同的圖片，並分別命名，儲存在映像目錄下，如：images/*.jpg。如果用4幅的話，分別 取名為：blen1.jpg； blen2.jpg； blen3.jpg；blen4.jpg。

　　BLUR屬性

　　【Blur屬性】把Blur濾鏡載入到文字上，可產生立體字的效果，載入到圖片上，可以產生風吹模糊效果。不僅美化了網頁，也為你的網頁減輕了分量。

　　下面介紹一下Blur濾鏡的參數，以便你靈活應用：

　　Add：是否讓Blur濾鏡起作用，Add=False(或“0”)時Blur濾鏡不起作用，取True（或非“0”值）時Blur濾鏡起作用，只有兩個值，即true和false；

　　Direction：陰影的方向，取值範圍0~360度，45度一個間隔，所以實際上只有八個方向值；

　　Strength：它代表有多少個像素的寬度成為陰影，你也可以簡單地理解為陰影的長度。它只能用整數來指定，預設值是5個像素，你可以根據實際需要來指定陰影的長度。我上面的兩個圖片例子是用的同一個濾鏡，Strength是10個像素。同一網頁中對不同的對象可以使用不同參數的Blur濾鏡，你只要給它們取不同的名稱就行了。

　　CHROMA 屬性

　　【Chroma屬性】　Chroma屬性可以設定一個對象中指定的顏色為透明色，它的運算式如下：

　　Filter：Chroma（color=color）

　　這個屬性的運算式是不是很簡單，它只有一個參數。只需把您想要指定透明的顏色用 Color參數設定出來就可以了。

　　DROPSHADOW 屬性

　　【DropShadow屬性】作用是添加對象的陰影製作效果。實際效果看上去就象是原來的對象離開了頁面，然後在頁面上顯示出該對象的投影。其工作原理是建立一個位移量，然後加上顏色。

　　Dropshadow濾鏡有四個參數，它們的含義為：

　　“Color”：代表投射陰影的顏色。

　　“offx”和“offy”：分別是X方向和Y方向陰影的位移量，它必須用整數值，如果是正整數，那麼表示陰影向X軸的右方向和Y軸的下方向。若是負整數值，陰影的方向正好相反。另外“offx”和“offy”數值的大小決定了陰影離開對象的距離；

　　“Positive”參數：如果為“true（非0）”，那麼就為任何的非透明像素建立可見的投影。如果為“fasle（0）”，那麼就為透明的像素部分建立透明效果。

　　對文字載入Dropshadow濾鏡比較方便的辦法，是把Dropshadow濾鏡載入到文字所在的表格儲存格< td >上。文字比較小時，使用Dropshadow的效果不太理想，所以一般用於製作稍大的標題字。

　　Dropshadow濾鏡對一般圖片無效，但我們把圖片放到表格中，再給表格的<td>載入 Dropshadow濾鏡，將會產生一種圖片有了立體邊框的效果。

　　FLIPH 屬性

　　【FlipV 屬 性】FlipV是一個垂直翻轉對象的濾鏡，當把FlipV載入到一個對象上，該對象將產生一個垂直鏡象，以此來創造垂直翻轉的效果；它是無參數濾鏡之一。功能單一，使用方便，效果顯著。