javascript - HTML 分层框架

标签 javascript html css

我正在尝试使用 HTML 层进行训练。就我对图层的研究而言,我能够将文本和图像作为具有 Z-Index 概念的图层。但是,我希望将帧作为图层插入。例如,在 gmail 中,背景图像是不变的,邮件列表将上下滚动。我不明白这是怎么发生的。

我使用了以下代码来分层文本和图像 -

<html>
<head>
<title>layers example</title>
</head>
<body><layer id="layer1" top="250" left="50" width="200" 
    height="200" bgcolor="red" src="http://www.bing.com">
  <p>layer 1</p>
</layer>
<layer id="layer2" top="350" left="150" width="200" 
    height="200" bgcolor="blue" src="http://www.google.com">
  <p><a href="http://www.google.com/">layer 2</a></p>
</layer>
<layer id="layer3" top="450" left="250" width="200"
    height="200" bgcolor="green" src="http://www.yahoo.com">
  <p>layer 3</p>
  <div style="position:relative; font-size:50px; z-index:1;"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQ6J6SpArkOxpmJnTYWEhpHVBblK6QaEklttBWfamorUYuMCob42A"></div>
 <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:2"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTZc0IWj3c3KTndAIy7-3SHhuur4z3Dzufa31xQf4csrZmDvm-e0A"></div>
 <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:2"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRvqc6p-sUKBtmYUrp4tIGqjXfXOGExoGkpZvLxTPcVGZRMc4iN"></div>
 <div id="Layer1" style="position:absolute;width:300px;height:75px;left:54px;background-color:green"><b>This is layer1</b></div>
 <div id="Layer2" style="position:absolute;width:200px;height:65px;left:54px;background-color:orange;border:1px"><b>This is layer2</b></div>
</layer>
</body>
</html>

如果有人对此有想法,请与我分享。

提前致谢。

最佳答案

Demo

.YourClass{
    background:url("images/yourBackgroundImagePath") no-repeat ;
    background-attachment:fixed;}

关于javascript - HTML 分层框架,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17521215/

相关文章:

javascript - 使用 JavaScript 重定向

javascript - 单击按钮打开带有闪烁光标的输入字段

javascript - 为什么 JSLint 会返回意外的 'String' 消息?

javascript - 如何根据输入文本语言自动设置文本方向?

html - &lt;input type ="file"> 按扩展名限制可选文件

html - 正确的面包屑微数据标记

html - 为什么这些 block 元素在同一行?

php - Firefox 和 chrome 中的页面无法正确显示 ul

javascript - 你可以使用电话或申请新的吗?

javascript - 表格的替代颜色 css 不适用