我想制作类似于此http://www.thomaspomarelle.com/(当然是自定义设计)的内容,但是我遇到的问题是我的about部分应该位于背景图片的下方,并且可以通过滚动页面进行访问,它位于header :(我绝对不知道为什么。我在想这是因为我体内有图像,但是我尝试将图像放在header部分之后的div中,这根本不起作用。
这是我的代码:
<html>
<head>
<title>yudasinal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body id="backimage">
<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div id = "projects">
<ul>
<li class = "line">
<a href = "#">HOME</a>
</li>
<li class = "line">
<a href = "#">HOME</a>
</li>
<li class = "line">
<a href = "#">HOME</a>
</li>
</ul>
</nav>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
这是它的css:
#projects ul {
text-align: right;
margin-right: 10px;
padding: 15px 15px;
font-size: 18px;
line-height: 60px;
}
#projects li {
display: inline-block;
height: 40px;
position: relative;
overflow: hidden;
background-position: top center;
}
#projects ul li.line a {
padding: 0 30px 30px;
text-align: center;
}
#projects li.line a::after {
position: absolute;
top: 87%;
left: 0;
width: 100%;
height: 3px;
background: black;
content: '';
opacity: 0;
-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
#projects li.line a:hover::after,
#projects li.line a:focus::after {
height: 5px;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
#backimage {
background-image: url(http://cs425729.vk.me/v425729136/4e67/6abwVXLTK9s.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: auto;
}
.wrapper {
width: 1000px;
margin: auto;
clear: both;
z-index: 10;
}
它还具有Twitter Bootstrap CSS。
提前非常感谢您的帮助!!!
最佳答案
我一直在努力达到同样的效果。我发现html,body和保存您的背景图片的div的高度需要为100%。我发现做到这一点的最好方法。如果有人有更好的方法,请分享。
小提琴:http://jsfiddle.net/b87pV/
的HTML
<body>
<div class="first">
<div class="header">
<div class="logo">LOGO</div>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
</div>
</div>
<div class="second">
<div id="projects">
<h1>Projects</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi nesciunt explicabo ipsam laudantium quaerat dolorem molestiae. Reprehenderit, perspiciatis, assumenda, repellat dolores dolore corporis doloribus voluptatem magni suscipit aperiam fugiat quia.
</p>
</div>
的CSS
html,body {
height: 100%;
padding: 0;
margin: 0;
}
.first {
height: 100%;
background-image: url(http://cs425729.vk.me/v425729136/4e67/6abwVXLTK9s.jpg);
background-repeat: no-repeat;
background-position: top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header {
background: #333;
height: 60px;
}
.logo, a {
color: white;
}
.logo {
float: left;
padding: 20px;
}
nav {
float: right;
padding: 5px
}
nav li{
display: inline-block;
padding-right: 50px;
}
#projects {
padding: 50px;
}
我相信互联网浏览器会在background:cover上绊倒。有周围的工作。简单搜索即可。
关于html - “内容”部分位于标题上方,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20014224/