振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
CSS設計濾鏡之alpha屬性
2010/07/19
CSS設計濾鏡之alpha屬性

alpha是來設置透明度的。先來看一下它的表達格式:
filter:alpha(opacity=opcity,finishopacity=finishopacity,
style=style,startX=startX,startY=startY,finishX=finishX,
finishY=finishY)

  哇,怎麼這麼長。是啊,不過這些參數都各有其用。
Opacity代表透明度等級,可選值從0到100,0代表完全透明,100代表完全不透明。 Style參數指定了透明區域的形狀特徵。其中0代表統一形狀;1代表線形;2代表放射狀;3代表長方形。
Finishopacity是一個可選項,用來設置結束時的透明度,從而達到一種漸變效果,它的值也是從0到100。 StartX和StartY代表漸變透明效果的開始座標,finishX和finishY代表漸變透明效果的結束座標。
從上面講的我們可以看出,如果不設置透明漸變效果,那麼只需設置opacity這一個參數就可以了。

實現上面這種效果的代碼如下:

<html>
<head>
<title>alpha</title>
<style>//*定義CSS樣式*//
<!--
div{position:absolute; left:50;top:70; width:150; }
//*定義DIV區域內的樣式(位置為絕對定位,left、top、width的座標)*//
img{position:absolute;top:20;left:40;
filter:alpha(opacity=80)}
//*定義圖片的樣式,絕對定位,濾鏡屬性是透明度為80*//
-->
</style>
</head>
<body>
<div>
<p style=“font-size:48;font-weight:bold;color:red;”>
Beautiful </p>//*定義字體屬性,前景色為紅色*//
</div>
<p><img src=“ss01076.jpg”> </p>
//*導入一張圖片*//
</body>
</html>

如果在上面的代碼中稍做改動,則將產生另外多種效果。我們只修改img的樣式屬性,把head中的Img樣式屬性代碼改為如下所示:

img{position:absolute;top:20;left:40;
filter:alpha(opacity=0,finishopacity=100,
style=1,startx=0,starty=85,finishx=150,finishy=85);}
//*設置透明漸變效果,起始座標,終止漸變座標,並設置透明樣式值(style=1)為線形*//

上是CSS的Alpha濾鏡屬性的應用,具體應用還需要您自己找個例子練一練。

最後更新 ( 2010/10/26 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇