twitter-bootstrap Bootstrap 全高背景封面图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21006170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Full Height Background Cover Image
提问by Adda
I am currently designing a site using Bootstrap and am trying to include a full height background cover image like on this site: http://lewisking.net/.
我目前正在使用 Bootstrap 设计一个网站，并试图在这个网站上包含一个全高的背景封面图片：http: //lewisking.net/。
This is my code:
这是我的代码：
HTML
HTML
<header class="title">
<div class="cut">
<img src="" height="">
</div>
<h2>Vintage Boutique Based in New York</h2>
<nav>
<ul>
<li><a href="#portfolio">SHOP</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">PRESS</a></li>
</ul>
</nav>
</header>
CSS
CSS
header {
background: url(../img/nycfull.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.cut img {
max-width: 100%;
height: auto;
max-height: 100%;
}
However, I can't see to get the image to cover the entire "above the fold" section. The image just go as height as the text in the header. Any idea what I am doing wrong?
但是，我无法让图像覆盖整个“首屏”部分。图像的高度与标题中的文本一样高。知道我做错了什么吗？
回答by dardar.moh
Do you mean like this demo?
你的意思是喜欢这个演示吗？
If yes try this code :
如果是，请尝试此代码：
CSS CODE
代码
.cover{
color: rgb(255, 255, 255);
position: relative;
min-height: 350px;
background: url("http://lewisking.net/images/header-image.jpg") no-repeat scroll 0px 100% / cover transparent;
}
nav ul li {
list-style:none;
float:left;
margin-right:50px;
}
HTML CODE :
HTML代码：
<div class="cover">
<div class="clearfix"></div>
<nav>
<ul>
<li><a href="#portfolio">SHOP</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">PRESS</a></li>
</ul>
</nav>
</div>
回答by BrainHappy
Your nav and header should not be together! Use your header to display your initial section for your site (what people see when they land on your page). Add positions to your nav to fix it where you want instead.
你的导航和标题不应该在一起！使用您的标题来显示您网站的初始部分（人们登陆您的页面时看到的内容）。将位置添加到您的导航以将其固定在您想要的位置。
CSS code for a full height cover image:
全高封面图片的 CSS 代码：
header {
background-image: url(background-img.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
min-height: /*enter value here*/;
}
In your HTML, you should code your <nav> navbar html here </nav>first, and then your <header> header html here </header>.
在您的 HTML 中，您应该<nav> navbar html here </nav>首先编写代码，然后编写<header> header html here </header>.
If you are coding your site to be mobile-ready, read this tutorial to implement a working cover image fix: CSS background-size: cover – Making it work for mobile / iOS
如果您正在编写适合移动设备的网站，请阅读本教程以实现有效的封面图像修复：CSS 背景大小：封面 – 使其适用于移动设备 / iOS
