HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何在 HTML 中添加图层?

htmlfront end technologyweb development更新于 2025/8/14 2:52:17

我们可以使用 HTML 中的 <layer> 标签向 HTML 文档添加图层。使用此标签创建图层后，我们就可以使用 JavaScript 对其进行操作。此标签用于定位页面中的元素并(通过脚本)为其添加动画效果。图层可以被视为位于主文档之上的独立文档，并且所有元素都位于一个窗口中。以下是 HTML 中 <layer> 标签的用法 -

<LAYER SRC="frame.gif" ABOVE="bg" NAME="frame" WIDTH=200 HEIGHT=200>

<layer> 标签的属性

Above − layer 标签中的 above 属性指定与当前 layer 相比，上一层 layer 的名称。以下是 <layer> −

中 above 标签的用法 
<LAYER SRC="pic.jpg" Z-INDEX=1 NAME="flower" VISIBILITY=SHOW>
<LAYER SRC="tree.gif" ABOVE="flower" NAME="Tree">

Background − background 属性指定浏览器平铺为 layer 背景的图像的绝对位置或相对位置。以下是 layer 标签中 background 的用法 -

<LAYER Z-INDEX=5 NAME="info" BACKGROUND="logo.gif">
   <h1>Hi there</h1>
</LAYER>

Below − Below 属性用于指定当前图层下方图层的名称。以下是 layer 标签中 Below 的用法 -

<LAYER BACKGROUND="floor.jpg" NAME="floor" UNDER="Car"></LAYER>

bgcolor − bgcolor 属性指定图层的背景颜色。它使用 RGB 的十六进制值或颜色名称。以下是 layer 标签中 bgcolor 的用法。

<layer bgcolor=#ff0011> 
   <div align=center> 
      <h1><blink>eat at joes!</blink></h1>
   </div>
</layer>

clip − clip 属性指示裁剪矩形的尺寸，该矩形指定了图层的可见区域。矩形之外的区域将变为透明。以下是 layer 标签中 clip 属性的语法

<layer src="pic.jpg" clip="40%,40%"></layer>

Height − height 属性指定图层的垂直尺寸。以下是 layer 标签中 height 属性的用法。

<layer src="car.gif" above="bg" name="car" width=200 height=200></layer>

left − left 属性指定相对于父图层左边缘的水平位置。垂直定位我们使用 top 属性。以下是在 layer 标签中 left 属性的用法。

<layer left=100 top=150> 该图层位于 {100,150}</layer>

name − name 属性用于为图层命名，以区别于其他代码。以下是此属性的用法。

<layer src="car.gif" name="carpic" above="road"></layer>

src − src 属性指定图像文件或包含图层内容的文件的相对或绝对位置。以下是 layer 标签中 src 属性的用法。

<layer src="logo.jpg"></layer>

top − top 属性指定图层相对于父图层上边缘的垂直位置。

<layer left=100 top=150>此图层位于 {100,150}</layer>

visibility −可见性图层指定图层最初是否可见?

  • visibility=show // 图层最初可见

  • visibility=hide // 图层最初不可见。

<LAYER SRC="tree.gif" Z-INDEX=1 NAME="tree" VISIBILITY=SHOW>

Z-index − z-index 用于指定图层是否显示在堆栈层中。<layer> 是浏览器特定的元素，容易造成混淆。要创建图层效果，我们可以使用 <div> 标签的 z-index 属性。

<LAYER Z-INDEX=0 NAME="Bottom">如果该文本上方有其他图层，则不会显示此文本。</LAYER>

示例

在下面的示例中，我们尝试使用 <layer> 标签向 HTML 文档添加图层 −

<!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>

相关文章

有用资源

打印 下一节:如何在 HTML 中添加菜单列表? ❯❮ 上一节:在 HTML 中创建斜体文本