我正在尝试弄清楚如何在 div 全宽和响应式中制作背景图像。背景图像在页面的宽度上扩展(并且具有响应性),但图像的高度不是其完整高度。似乎它被某种方式切断了。我正在使用引导框架,我尝试这样做的原因是我想在图像上覆盖一些文本。我尝试了很多不同的方法,但似乎无法弄清楚,救命!
<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
and margin: 0 auto
.
使用绝对定位将文本绘制在图像上。在最简单的情况下,我拉伸h1
元素是父元素的全宽并使用text-align: center
使文本居中。使用顶部或底部偏移将文本放置在需要的位置。
如果您的横幅图像的长宽比会有所不同,您将需要调整最大宽度值.bg-image img
动态地使用 jQuery/Javascript,但除此之外,这种方法还有很多好处。
请参阅演示:http://jsfiddle.net/audetwebdesign/EGgaN/ http://jsfiddle.net/audetwebdesign/EGgaN/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)