Bootstrap全高度背景封面图像

发布时间：2020-12-18 00:30:05 所属栏目：安全来源：网络整理

导读：我目前正在使用Bootstrap设计一个网站,我试图在这个网站上包含一个全高背景图像： http://lewisking.net/. 这是我的代码： HTML header class="title"div class="cut"img src="" height=""/divh2Vintage Boutique Based in New York/h2navullia href="#portf

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

}

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!