|
|
|
| [組圖]讓css使網(wǎng)頁(yè)圖片半透明 |
讓我先通俗的介紹一下css，css不屬于html，它屬于html的輔助語(yǔ)言，在沒(méi)有css之前，網(wǎng)頁(yè)是靜態(tài)的，但自從有了css 后，網(wǎng)頁(yè)制作的歷史就要重寫(xiě)了，css能給網(wǎng)頁(yè)加入許多你想象不到的動(dòng)態(tài)效果，這也是其中一點(diǎn)而已，因?yàn)閏ss中有很多特效，例如我們今天講的利用css使圖片變透明。
也許你會(huì)問(wèn)，GIF圖片不是能透明嗎？那干嘛還那么麻煩，嘿嘿，GIF是可以透明，但可以半透明么？那很明顯是不行的，但css就可以。想學(xué)就跟我來(lái)。
如果是完全變透明，那么它的意義不大，重要的是它可以令圖片半透明，嘿嘿，還不明白么？既然是半透明，學(xué)過(guò)Photoshop的人都應(yīng)該知道，半透明了，就可以半遮半掩的顯示圖片下面的元素！我們利用這一點(diǎn)可以做很多效果哦，例如類(lèi)似煙霧效果啦，當(dāng)然，如果你肯動(dòng)動(dòng)腦筋，更精彩的效果可能都能做的出來(lái)。我們今天只討論如何在Dreamweaver 4中設(shè)置與使用這種特效。
Ok，我們現(xiàn)在開(kāi)始，前提是你得打開(kāi)Dreamweaver 4，下面是設(shè)置步驟：
1：在Dreamweaver 4中點(diǎn)window>>css styles(或按鍵盤(pán)的shift+f11),調(diào)出css styles窗口。
2：在css styles窗口中，單擊右下角的加號(hào)，彈出new style窗口。設(shè)置如圖：
圖1
3：點(diǎn)ok，彈出一個(gè)大窗口style definition for .clarity，我們按照下圖設(shè)置。
圖2
也許你已經(jīng)注意到了Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)這一段代碼，里面有很多問(wèn)號(hào)，這需要我們?nèi)ビ脜?shù)來(lái)代替它，不要看到代碼就怕，無(wú)非就幾個(gè)意思，了解后不就那么一回事嘛。
要得到好的效果，那么這些用來(lái)代替問(wèn)號(hào)的參數(shù)可不能馬虎，先看看每一樣參數(shù)的意思我們?cè)倮^續(xù)。
（1）“Opacity”代表透明度水準(zhǔn)，范圍是0---100，其實(shí)就是百分比的意思，如果你想變?yōu)槿该�，那么就�?代替Opacity后面的問(wèn)號(hào)吧。
（2）“FinishOpacity”就是用來(lái)指定結(jié)束時(shí)的透明度，范圍跟Opacity一樣（FinishOpacity為可選參數(shù)，不想要的話(huà)就去掉它吧。
（3）“Style”是指定透明區(qū)域的形狀特征，0代表統(tǒng)一形狀，1代表線(xiàn)形，2代表放射形，3代表長(zhǎng)方形。比如我們一般可以寫(xiě)成Style=1。
（4）“startX”與”startY”就是代表漸變效果開(kāi)始的X與Y坐標(biāo)，（坐標(biāo)應(yīng)該知道是什么吧）一般我們?cè)O(shè)置為StartX=0, StartY=0（這樣就是表示的透明效果是從圖片的左上角開(kāi)始的。）
（5）“FinishX”與“FinishY”當(dāng)然，這個(gè)就是代表漸變效果結(jié)束時(shí)的橫縱坐標(biāo)了，這里很關(guān)鍵，填什么數(shù)值那就要看你的圖片的高與寬了，假設(shè)我們的圖片高與寬分別是100、200像素，那么就可以寫(xiě)成FinishX=200， FinishY=100。（如果你只想要一半的面積是透明，那么可以設(shè)置成FinishX=100， FinishY=50）
給下面一個(gè)完整代碼的給你們參考：（下面的數(shù)值我是假設(shè)圖片高與寬分別是100、200像素）
Alpha(Opacity=25, FinishOpacity=50, Style=1, StartX=0, StartY=1, FinishX=200, FinishY=100)
4：ok，這時(shí)候你應(yīng)該做的是把你想要的數(shù)值把那些討厭的問(wèn)號(hào)替換掉，設(shè)置好這些參數(shù)后，就點(diǎn)擊ok。設(shè)置的步驟到此就算完成了，但設(shè)置完了不代表我們就做完了，我們還要把這個(gè)效果賦予圖片呢。下面介紹如何使用的步驟。
1：在Dreamweaver 4插入一圖，假設(shè)高為100，寬為200單位是像素（為了能看到效果，我們可以把網(wǎng)頁(yè)的背景設(shè)為紅色等鮮明的色彩。
2：再次調(diào)出css styles窗口（參見(jiàn)設(shè)置步驟1）
3：在css styles窗口中，應(yīng)該有個(gè)clarity，如圖指明處：
圖3
4：在Dreamweaver 4選中你插入的圖。
5：用鼠標(biāo)單擊上圖3的指明處。
6：大功告成，你可以按鍵盤(pán)的f12來(lái)預(yù)覽了（注意，這種特效在編輯狀態(tài)下是不可見(jiàn)的，一定要預(yù)覽才可見(jiàn)。
怎么樣，圖片是不是變的半透明了？這教程只起到拋磚引玉的作用，說(shuō)到底還是要大家掌握了方法后能舉一反三。
|
|
|
您現(xiàn)在的位置： 
