我试图弄清楚如何使div全宽和响应的背景图像。背景图像在页面的整个宽度上都在扩展(并且是自适应的),但是图像的高度不是其整个高度。好像它已经被切断了。我正在使用bootstrap框架,而尝试执行此操作的原因是我想在图像上覆盖一些文本。我已经尝试了很多不同的方法,但似乎无法弄清楚,帮助!
<div class="bg-image">
<div class="container">
<div class="row-fluid">
<div class="span12">
<h1>This is some text</h1>
</div>
</div>
</div>
</div>
.bg-image {
background: url(img/image.jpg) no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-height: 450px;
}
最佳答案
这是获得所需设计的一种方法。
从以下HTML开始:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="nav">nav area</div>
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<h1>This is centered text.</h1>
</div>
<div class="main">main area</div>
</div>
</div>
</div>
请注意,背景图像现在是文档常规流程的一部分。
应用以下CSS:
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
.bg-image h1 {
position: absolute;
text-align: center;
bottom: 0;
left: 0;
right: 0;
color: white;
}
.nav, .main {
background-color: #f6f6f6;
text-align: center;
}
运作方式
图像设置为宽度为100%的常规流量内容,因此它将根据父容器的宽度进行调整。但是,您希望高度不超过450px,这对应于1200px的图像宽度,因此请将图像的最大宽度设置为1200px。您可以使用
display: block
和margin: 0 auto
保持图像居中。通过使用绝对定位将文本绘制在图像上。在最简单的情况下,我将
h1
元素拉伸(stretch)为父级的完整宽度,并使用text-align: center
使文本居中。使用顶部或底部偏移量将文本放在需要的位置。如果横幅图像的宽高比有所不同,则需要使用jQuery / Javascript动态调整
.bg-image img
的最大宽度值,但是除此之外,这种方法还有很多其他用途。观看演示:http://jsfiddle.net/audetwebdesign/EGgaN/