特殊效果
CSS 位置層級的裁切、滿溢和顯示與否的特性使網頁想建置特別效果時, 變的容易許多。裁切的屬性讓您顯示出重疊的區域,滿溢的屬性讓您指定事件
在任一物件上,而且不必去調整範圍框的高度及寬度,顯示與否的屬性能 使物件是否要隱藏起來,這個屬性很強大,當我們程式碼執行到某一部份時 隱藏起物件,就好像這個物件從來就不曾出現過。
下面的例子,我們建立了一個 span 元件,取名為 hidden 並且利用 visibility 屬性使其暫時隱藏起來。您在流覽器上看不到這些文字。
但您注意到接下來我們會空出畫面來‧接下來的元件取名為 overflow 屬性 overflow 也是隱藏。 標籤的範湋框比文字來的小一點,所以文字會被切掉部份,接下來兩個
元件示範了裁切‧最後一個元件放置在另一個之前,但是這個元件被裁切 成一個小範湋,因此,底下那層的內容就有部份可以顯示出來了。
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
.hidden
{
position: relative;
visibility: hidden
}
.overflow
{
position: absolute;
top: 210px;
left: 60px;
width: 40px;
height: 40px;
background-color: yellow;
overflow: hidden
}
.plain
{
position: absolute;
top: 200px;
left: 200px;
width: 150px;
height: 150px;
background-color: #eeeeee;
}
.clip
{
position: absolute;
top: 200px;
left: 200px;
width: 150px;
height: 150px;
color: yellow;
background-color: blue;
clip: rect(25px 125px 125px
25px);
}
-->
</STYLE>
</HEAD>
<BODY>
<SPAN class="hidden">這裡有文字,</SPAN>
<=左邊其實有一段字,但是被設為不顯示
<DIV class="overflow">框太小字太多,滿溢的效果會把部份字隱藏起來</DIV>
<DIV class="plain"> 這段文字上頭蓋一塊藍色的區域 但是因為藍色區域部份被裁切掉了,沒被遮住的地方文字顯示出來</DIV>
DIV class="clip"我們設定一段黃色的文字放在這個框之中,清楚顯示
被裁切的效果</DIV>
</BODY>
</HTML>
|
參閱 CSS
屬性一覽表列出所有屬性及內含值
以下為文章回應區
同意轉載,不過麻煩看一下轉載需知