我目前正在使用Bootstrap设计一个网站,我试图在这个网站上包含一个全高背景图像: http://lewisking.net/. 这是我的代码: HTML header class="title"div class="cut"img src="" height=""/divh2Vintage Boutique Ba
这是我的代码:
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>