如何在HTML中新增圖層?


我們可以使用HTML中的<layer>標籤向HTML文件新增圖層。建立圖層後,我們可以使用JavaScript操作它。此標籤用於定位和動畫(透過指令碼)頁面中的元素。圖層可以被認為是一個獨立的文件,位於主文件之上,所有這些都存在於一個視窗中。以下是HTML中<layer>標籤的用法:

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

<layer>標籤的屬性

above − layer標籤中的above屬性指定與當前圖層相比上方圖層的名稱。以下是<layer>中above標籤的用法:

<LAYER SRC="pic.jpg" Z-INDEX=1 NAME="flower" VISIBILITY=SHOW>
<LAYER SRC="tree.gif" ABOVE="flower" NAME="Tree">

background − background屬性指定瀏覽器平鋪作為圖層背景的影像的絕對或相對位置。以下是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> this layer is at {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>this layer is at {100,150}</layer>

visibility − 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">You will not this text if other layers are above it.</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>

更新於:2023年10月10日

2K+ 瀏覽量

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.