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 标签。

打印页面