6

我目前正在使用 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%;
}

但是，我看不到让图像覆盖整个“首屏”部分。图像的高度与标题中的文本一样高。知道我做错了什么吗？

4

2 回答 2

11

你的意思是喜欢这个演示吗？

如果是，请尝试以下代码：

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;

}

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>
于 2014-01-08T21:21:48.843 回答
1

您的导航和标题不应该在一起！使用您的标题显示您网站的初始部分（人们登陆您的页面时看到的内容）。将位置添加到您的导航以将其修复到您想要的位置。

全高封面图片的 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*/;
}

在您的 HTML 中，您应该<nav> navbar html here </nav>先编写代码，然后再编写<header> header html here </header>.

如果您正在编写适合移动设备的网站，请阅读本教程以实现有效的封面图像修复：CSS 背景尺寸：封面 - 使其适用于移动设备/iOS

于 2016-04-18T20:31:18.973 回答