我想要创建类似这样的东西:Page
我指的是第一张图片。如果我滚动,div会覆盖在图片上方。
如何创建这个效果?如果我给我的图片 position: fixed,一切都被破坏了^^
而且position: absolute也许有用,但是div就在导航栏旁边。
这是我的尝试:enter link description here
以下是代码:
*{
font-family: "Open Sans";
margin: 0px;
padding: 0px;
font-size: 18px;
}
html {
height: 100%;
}
body{
/*background: url("images/bg.png") repeat-x scroll left top #9EB5D6;
background: url("images/bg2.png"); */
height: 100%;
}
nav{
background: url("images/line-header.png") repeat-x scroll center bottom #4A525A;
padding: 15px;
}
nav > ul{
margin: 0px;
padding: 0px;
text-align: center;
}
nav ul > li{
margin-left: 25px;
display: inline-block;
list-style-type: none;
}
nav ul li > a{
display: block;
text-decoration: none;
color: black;
color: #697683;
transition: color 0.5s;
}
nav ul li > a:hover{
color: #FFF;
}
.pic1 {
background: url(images/banner.jpg);
height: 100%;
width: 100%;
}
.text{
height: 800px;
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css" >
<!-- Open Sans -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</nav>
<div class="pic1">
</div>
<div class="text">
</div>
</body>
</html>
position:fixed
和z-index:999
的魔力。 - Vedant Terkar