我目前正在使用Bootstrap设计一个网站,我试图在这个网站上包含一个全高背景图像：
http://lewisking.net/.
这是我的代码：
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
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%;
}
但是,我无法看到图像覆盖整个“首屏”部分.图像的高度与标题中的文本一样高.知道我做错了什么吗？
解决方法
你的意思是这个
demo吗？
如果是,请尝试以下代码：
CSS代码
.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;
}
<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>