快網首頁 | 虛擬主機 | 域名注冊 | 特惠套餐 | 企業郵局 | SQL空間 | IDC業務 | 全球通郵
讓css使網頁圖片半透明
客服中心新聞動態常見問題常用資料知識學堂走近客服在線提問網站導航
讓css使網頁圖片半透明
 網頁設計 | 操作系統 | 程序開發 | Dos 命令 | 平面設計 | 辦公軟件

 您的位置:快網首頁 >> 客服中心 >> 知識學堂 >> 網頁設計 >> 文章正文

讓css使網頁圖片半透明
供稿:潤之康   時間:2009-3-18 14:32:21
讓我先通俗的介紹一下css,css不屬于html,它屬于html的輔助語言,在沒有css之前,網頁是靜態的,但自從有了css 后,網頁制作的歷史就要重寫了,css能給網頁加入許多你想象不到的動態效果,這也是其中一點而已,因為css中有很多特效,例如我們今天講的利用css使圖片變透明。

  也許你會問,GIF圖片不是能透明嗎?那干嘛還那么麻煩,嘿嘿,GIF是可以透明,但可以半透明么?那很明顯是不行的,但css就可以。想學就跟我來。

  如果是完全變透明,那么它的意義不大,重要的是它可以令圖片半透明,嘿嘿,還不明白么?既然是半透明,學過Photoshop的人都應該知道,半透明了,就可以半遮半掩的顯示圖片下面的元素!我們利用這一點可以做很多效果哦,例如類似煙霧效果啦,當然,如果你肯動動腦筋,更精彩的效果可能都能做的出來。我們今天只討論如何在Dreamweaver 4中設置與使用這種特效。

Ok,我們現在開始,前提是你得打開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來預覽了(注意,這種特效在編輯狀態下是不可見的,一定要預覽才可見。

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

快網保留以上說明的最終解釋權
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管
   
熱門搜索:FTP 域名 DNS 備案 空間 郵箱 SQL 主機 快網 中文域名 虛擬主機
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管
快網客服中心的相關信息:
v 用CSS的Border屬性制作特效菜單 [2009-3-18 14:15:19]
v 在網頁中插入CSS [2009-3-18 14:14:21]
v CSS產生特殊效果 [2009-3-18 14:11:41]
v css改變鼠標顯示 [2009-3-18 14:08:26]
v CSS教程_CSS容器屬性 [2009-3-18 14:07:20]
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管
如果您在使用我們的產品中遇到問題,建議您首先在“常見問題”中查詢解決方法;
如果沒有找到該問題的解決方法,您可以在“問題搜索”中進行搜索;
如果搜索后沒有找到滿意答案,您可以“在線提問”,我們會盡快給您答復。
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管
域名注冊查詢中文域名轉碼
域名whois查詢網站PR值查詢
快網,域名注冊,虛擬主機,ASP空間,企業郵局,SQL空間,主機租用,主機托管

:::::: | 收藏本站 | 關于我們 | 客服中心 | 付款方式 | 聯系我們 | 網站律師 | 工作機會 | 網站地圖 | 產品管理 | ::::::

Copyright (C) 2003-2008 天津追日科技發展有限公司  Cnkuai.cn  快網.cn  中國快網.cn
野草社区在线观看_三分钟免费观看视频_日本最新免费二区三区