div图像位置固定+滚动 [英] div image position fixed + scroll
问题描述
我想创建类似的内容：第页
I want to create something like that: Page
我的意思是第一个图像。如果我滚动在img下的div在图像上。
我如何创建？如果我给我的img的位置：固定，一切都被破坏^^
位置absoulte也许是有用的，但div是导航然后。
这是我的尝试：在此输入链接描述
I mean the first image. If i scroll the div under the img get over the image. How can i create that? If i give my img the position: fixed, everything is destroyed^^ And the position absoulte is maybe usefull but the div is next to the nav then. Here is my try: 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>
推荐答案
这是关于选择正确的方法。这种类型的滚动可以通过固定菜单（您在顶部），下推的div和背景图像轻松完成。我添加了一个很好的可重用的猫图像来显示效果。
It's about choosing the right approach. This type of scrolling can easily be done by a fixed menu (which you have at the top), a pushed-down div and a background image. I added a nice reusable cat image to show the effect.
你几乎在那里，只需要给导航一个固定的位置。
You were almost there, just needed to give the nav a fixed position.
* {
padding: 0;
margin: 0;
}
body {
background: url(https://c1.staticflickr.com/9/8226/8557105873_a82c51f03f_z.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
nav {
background-color: #555555;
text-align: center;
height: 20px;
position: fixed;
top: 0px;
width: 100%;
}
nav li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
nav li a {
color: white;
text-decoration: none;
}
.text {
background-color: orange;
margin-top: 500px;
min-height: 1000px;
}
<html>
<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="text">
text
</div>
</body>
</html>
这篇关于div图像位置固定+滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
