透明圖片制作

【推薦】Dreamweaver技巧:制作圖片半透明效果!

Dreamweaver技巧:制作圖片半透明效果!

在網頁的圖片處理中，半透明是經常要用到的圖片效果，它可以半遮半現地顯示

圖片下面的元素。利用這一點我們可以做出很多種效果，例如煙霧效果等。今天

在這里就討論如何在Dreamweaver4中設置和使用這種效果。

設置步驟：

1.在Dreamweaver4中點“window”→“CSSStyles”(或按鍵盤的

“shift+F11”),調出CSSStyles窗口。

2.在CSSStyles窗口中，單擊右下角的加號，彈出NewStyle窗口。圖中

的“Name”是建立的Class的名稱，Class名字的格式是“.XXXXX”（前面一

定要有個點）；“Type”的右邊有三個選項，由上到下駕照實習期上高速 分別是：建立一個Class、word護眼

重新定義標簽（網頁元素）、選擇偽類；“Define”的右邊有兩個選項：上面

指建立外部的CSS文件（選中這個后，你所建立的CSS不是嵌入你的網頁，而是

成為單獨的一個CSS文件，供網頁調用，大網站都是此種做法）；“thisDocument

only”是指直接在當前頁中建立CSS。

3.點“OK”，彈出一個大窗口y，我們按照

圖2設置。

在圖2中，除了*Filter外，別的選項不要管它。在*Filter右邊的下拉菜單中

選擇Alpha房屋拆遷合同 。也許你已經注意到了圖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代表長方形；

（4）“StartX”與”StartY”代表漸變效果開始的X與Y坐標。一般我們

設置為StartX=0,StartY=0（這樣表示透明效果是從圖片的左上角開始）；

（5）抵押借款合同 “FinishX”與“FinishY”代表漸變效車鑰匙丟了 果結束時的橫縱坐標。這里很

關鍵，填什么數值那就要看你的圖片的高與寬了，假設我們的圖片高與寬分別是

100、200像素，那么就可以寫成FinishX=200，FinishY=100。（如果你只想要

一半的面積是透明，那么可以設置成FinishX=100，FinishY=50）。

設置好這些參數后，就點擊“南京大屠殺的資料 OK”。設置的步驟到此就算完成了。

使用步驟：

1.在Dreamweaver4中插入一圖，假設其像素高為100，寬為200（為了能

看到效果，這里把網頁的背景設為鮮紅。

2.再次調出CSSStyles窗口（參見設置步驟），在CSSStyles窗口中，

應該有個Clarity，

3.選中剛兒童繪本故事 才插入的圖，用鼠標單擊“Clarity”。

4.到這里就大功告成了。你可以按鍵盤的F12來預覽一下。（注意，這種

特效在編輯狀態下是不可見的，一定要在預覽狀態下才可見。）