用CSS實現網頁圖片半透明[圖]

　　學過Photoshop的人都應該知道如何制作半透明的圖片！我們今天只討論如何在Dreamweaver 4中設置與使用這種特效。

　　首先打開Dreamweaver 4，下面是設置步驟：

　　1：在Dreamweaver 4中點Window CSS styles(或按鍵盤的shift+f11)，調出CSS styles窗口。

2：在CSS styles窗口中，單擊右下角的加號，彈出new style窗口。設置如圖1

　　3：點OK，彈出一個大窗口style definition for .clarity，我們按照如圖2設置。

　　也許你已經注意到了Alpha(Opacity=?， FinishOpacity=?， Style=?， StartX=?， StartY=?， FinishX=?， FinishY=?)這一段代碼，裡面有很多問號，這需要我們用參數來代替它。先看看每一樣參數的意思。

　　(1)：『Opacity』代表透明度水准，范圍是0---100，其實就是百分比的意思，如果你想變為全透明，那麼就用0代替Opacity後面的問號。

　　(2)：『FinishOpacity』就是用來指定結束時的透明度，范圍跟Opacity一樣（FinishOpacity為可選參數，不想要的話就去掉它。

　　(3)：『Style』是指定透明區域的形狀特征，0代表統一形狀，1代表線形，2代表放射形，3代表長方形。比如我們一般可以寫成Style=1。

　　(4)『startX』與』startY』就是代表漸變效果開始的X與Y坐標，（坐標應該知道是什麼吧）一般我們設置為StartX=0， StartY=0（這樣就是表示的透明效果是從圖片的左上角開始的。）

　　(5)『FinishX』與『FinishY』，當然，這個就是代表漸變效果結束時的橫縱坐標了。這裡很關鍵，填什麼數值那就要看你的圖片高與寬了。假設我們的圖片高與寬分別是100、200像素，那麼就可以寫成FinishX=200，FinishY=100。（如果你只想要一半的面積是透明，那麼可以設置成FinishX=100， FinishY=50）

　　下面一個完整代碼供大家參考：（下面的數值我是假設圖片高與寬分別是100、200像素）

　　Alpha(Opacity=25， FinishOpacity=50， Style=1， StartX=0， StartY=1， FinishX=200， FinishY=100)

　　4：OK，設置好這些參數後，就點擊OK，設置的步驟到此就算完成了。我們還要把這個效果賦予圖片，請看下面的步驟。

　　(1)在Dreamweaver 4插入一圖，假設高為100，寬為200單位是像素（為了能看到效果，我們可以把網頁的背景設為紅色等鮮明的色彩。）

(2)再次調出CSS styles窗口（參見設置步驟1）

(3)在CSS styles窗口中，應該有個clarity，如圖3指明：

　　(4)在Dreamweaver 4選中你插入的圖。

(5)用鼠標單擊上圖3的指明處。

(6)大功告成，你可以按鍵盤的f12來預覽了。

　　怎麼樣，圖片是不是變得半透明了？這教程只起到拋磚引玉的作用，說到底還是要大家掌握了方法後纔能舉一反三。