以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

特殊效果

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 屬性一覽表列出所有屬性及內含值

上一頁:圖層的重疊效果 下一頁:CSS 屬性一覽表

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: