Bootstrap 全高背景封面图片
Posted
技术标签:
【中文标题】Bootstrap 全高背景封面图片【英文标题】:Bootstrap Full Height Background Cover Image 【发布时间】:2014-01-27 04:11:15 【问题描述】:我目前正在使用 Bootstrap 设计一个网站,并尝试在此网站上包含全高背景封面图片:http://lewisking.net/。
这是我的代码:
<header class="title">
<div class="cut">
<img src="" >
</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%;
但是,我看不到让图像覆盖整个“首屏”部分。图像的高度与标题中的文本一样高。知道我做错了什么吗?
【问题讨论】:
【参考方案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 background-size: cover – Making it work for mobile / ios
【讨论】:
【参考方案2】:你的意思是这样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>
【讨论】:
是的,那个演示正是我的意思。谢谢! @jayden 更改背景链接: url() ,并且有效:) 感谢@CristiC777以上是关于Bootstrap 全高背景封面图片的主要内容,如果未能解决你的问题,请参考以下文章