HTML - <layer> 標籤

HTML <layer> 標籤用於在頁面中定位和動畫化（透過指令碼）元素。此標籤僅在 Netscape4 中實現，其他所有瀏覽器都忽略它。

可以將圖層視為一個單獨的文件，位於主文件之上，所有文件都存在於一個視窗中。標籤是一個已棄用的 HTML 元素，最初用於 Netscape Navigator 的早期版本中，用於在網頁上定位和動畫化元素。

語法

<layer id = "layer1" 
       top = "" 
       left = "" 
       width = "" 
       height = "" 
       bgcolor = "">
<p>layer 1</p>
</layer>

屬性

HTML <layer> 標籤支援以下屬性。

屬性	值	描述
above	圖層名稱	將直接位於當前圖層之上的內聯圖層的名稱（在 z 軸順序中）。
background	URL	內聯圖層文字和影像將顯示其上的影像的檔名或 URL。
below	圖層名稱	將直接位於當前圖層之下的內聯圖層的名稱（在 z 軸順序中）。
bgcolor	rgb(x,x,x) #xxxxxx 顏色名稱	用於內聯圖層背景的顏色。
clip	數字	內聯圖層可見區域的座標。
height	畫素	內聯圖層的高度（以畫素為單位）。
left	數字	內聯圖層左側的位置。如果當前內聯圖層是另一個圖層（稱為父圖層）的一部分，則位置相對於父圖層。
name	圖層名稱	內聯圖層的名稱。
pagex	數字	內聯圖層左側相對於瀏覽器視窗的位置。
pagey	數字	內聯圖層頂部相對於瀏覽器視窗的位置。
src	URL	將在內聯圖層中顯示的頁面的 URL。
top	數字	內聯圖層頂部的位置。如果當前內聯圖層是另一個圖層（稱為父圖層）的一部分，則位置相對於父圖層。
visibility	顯示隱藏繼承	確定內聯圖層是否可見。
width	畫素	內聯圖層的寬度（以畫素為單位）。
z-index	數字	內聯圖層在 z 軸順序中的位置。Z-INDEX 值較高的內聯圖層位於 Z-INDEX 值較低的內聯圖層之上。

HTML layer 標籤示例

以下是一些說明如何在 HTML 中使用 layer 標籤的示例。

Netscape 瀏覽器中的 layer 標籤

讓我們看一下以下示例，我們將在此示例中使用 layer 標籤。

<!DOCTYPE html>
<html>

<head>
   <title>HTML layer Tag</title>
</head>

<body>
   <layer id = "layer1" 
            top = "250" 
            left = "50" 
            width = "200" 
            height = "200" 
            bgcolor = "red">
            <p>layer 1</p>
   </layer>
   
   <layer id = "layer2" 
            top = "350" 
            left = "150" 
            width = "200"
            height = "200" 
            bgcolor = "blue">
            <p>layer 2</p>
   </layer>
   
   <layer id = "layer3" 
            top = "450" 
            left = "250" 
            width = "200"
            height = "200" 
            bgcolor = "green">
            <p>layer 3</p>
   </layer>
</body>

</html>

layer 標籤的替代方案

以下程式碼顯示瞭如何在現代瀏覽器中替換 layer 標籤。我們使用 div 元素並在 CSS 中為其應用 z-index。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         position: relative;
         width: 300px;
         height: 300px;
         border: 1px solid #000;
      }
      .layer {
         position: absolute;
         width: 100%;
         height: 100%;
      }
      .background {
         background-color: lightblue;
         z-index: 1;
         height: 300px;
         width: 300px;
      }
      .middle {
         background-color: lightgreen;
         z-index: 2;
         opacity: 0.5;
         height: 200px;
         width:200px;
      }
      .foreground {
         background-color: lightcoral;
         z-index: 3;
         height:100px;
         width:100px;
      }
   </style>
</head>
<body>
      <div class="container">
         <div class="layer background">
            ...................................
            ........Background Layer
         </div>
         <div class="layer middle">
            .................Middle Layer
         </div>
         <div class="layer foreground">
            Foreground Layer
         </div>
      </div>

      <p>
         Three div elements top of eachother, Background
         layer have z-index 1 which makes it the deepest
         layer. While the foreground layer have z-index 3, 
         hence that's the toppest layer.
      </p>
</body>
</html>

支援的瀏覽器

標籤
圖層	否	否	否	否	否

您只能在 Netscape Navigator 4 瀏覽器中實現 layer 標籤。

列印頁面