[英]Responsive background image in div full width
我试图找出如何在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
元素拉伸为父元素的整个宽度,并使用text-align: center
center将文本居中。 使用顶部或底部偏移将文本放置在需要的位置。
如果横幅图像的宽高比会有所不同,则需要使用jQuery / Javascript动态调整.bg-image img
的最大宽度值,否则,这种方法可以提供很多。
请参阅演示: http : //jsfiddle.net/audetwebdesign/EGgaN/
当您使用background-size: cover
,背景图像将自动拉伸以覆盖整个容器。 但是,长宽比会保持不变,因此除非图像的宽高比和应用的元素相同,否则您将始终丢失部分图像。
我看到两种方法可以解决这个问题:
不要通过设置background-size: 100% 100%
保持图像的纵横比 background-size: 100% 100%
这也会使图像覆盖整个容器,但不会保持比例。 缺点是这会扭曲您的图像,因此可能看起来非常奇怪,具体取决于图像。 随着你在小提琴中使用的图像,我认为你可以逃脱它。
您还可以使用javascript根据宽度计算和设置元素的高度 ,因此它与图像的比例相同。 此计算必须在加载和调整大小时完成。 使用几行代码应该很容易(如果你想要一个例子,可以随意询问)。 这种方法的缺点是您的宽度可能变得非常小(在移动设备上),因此计算的高度也会变小,这可能导致容器的内容溢出。 这可以通过改变内容的大小来解决,但它增加了解决方案的一些复杂性/
我也试过这种风格的离子混合应用程序背景。 这也有背景模糊效果的风格。
.bg-image {
position: absolute;
background: url(../img/bglogin.jpg) no-repeat;
height: 100%;
width: 100%;
background-size: cover;
bottom: 0px;
margin: 0 auto;
background-position: 50%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.