HTML - layer 标签_HTML 菜鸟教程

HTML <layer> 标签用于在页面中定位和动画（通过脚本）元素。此标签仅在 Netscape4 中实现，所有其他浏览器都会忽略此标记。

可以将图层视为一个单独的文档，它位于主文档的顶部，所有文档都存在于一个窗口中。该标记是一个已弃用的 HTML 元素，最初在早期版本的 Netscape Navigator 中用于定位网页上的元素并为其添加动画效果。

语法

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

属性

HTML <layer> 标签支持以下属性。

属性	值	描述
above	layer name	将按 z 顺序直接位于当前层上方的内联层的名称。
background	URL	图像的文件名或 URL，内联图层的文本和图像将在其上显示。
below	layer name	将按 z 顺序直接位于当前图层下方的内联层的名称。
bgcolor	rgb(x,x,x) #xxxxxx colorname	用于内联图层背景的颜色。
clip	number	内联图层的可见区域的坐标。
height	pixels	内联图层的高度（以像素为单位）。
left	number	内联图层左侧的位置。如果当前内联层是另一个层的一部分，称为父层，则位置是相对于父层的。
name	layer name	内联层的名称。
pagex	number	内联层左侧相对于浏览器窗口的位置。
pagey	number	内联层顶部相对于浏览器窗口的位置。
src	URL	将显示在内联层内的页面的 URL。
top	number	内联图层顶部的位置。如果当前内联层是另一个层（称为父层）的一部分，则该位置是相对于父层的。内联图层顶部的位置。如果当前内联层是另一个层（称为父层）的一部分，则该位置是相对于父层的。
visibility	show hide inherit	确定内联图层是否可见。
width	pixels	内联图层的宽度（以像素为单位）。
z-index	number	内联层在 z 顺序内的位置。具有较高 Z-INDEX 值的内联层位于具有较低 Z-INDEX 值的内联层之上。

HTML <layer> 标签示例

以下是一些示例，可以说明在 HTML 中使用<layer> 标签。

Netscape 浏览器中的<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> 标签的替代方案

以下代码展示了我们如何在现代浏览器中替换层标签。我们正在使用 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>

支持的浏览器

浏览器
是否支持	No	No	No	No	No

您只能在 Netscape Navigator 4 浏览器中实现层标记。

<< HTML - keygen 标签 HTML - menu 标签 >>