Html 响应式图像上的 Bootstrap 3 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21693940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 div over responsive image
提问by Lena Minime Gr?nnings?ter
I'm trying to have a full width <div>over an image, with text inside it, so that the text goes over the image itself. The grid and the image is responsive, and I can't get the <div>to be 100% of the grid.
我试图<div>在图像上有一个完整的宽度，里面有文本，这样文本就会越过图像本身。网格和图像是响应式的，我无法<div>将网格设为 100%。
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
<div class="col-md-6">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->As you can see, I want the portfolio_desciptionto be over the image, fill the width of the grid col-md-6and have a white background.
如您所见，我希望将portfolio_desciption其覆盖在图像上，填充网格的宽度col-md-6并具有白色背景。
Any suggestions on how my CSS should be composed?
关于我的 CSS 应该如何组成的任何建议？
回答by totymedli
tl;dr
tl;博士
Use position: absolute;with top: 0;on the <div>and don't forget to add position: relative;to their parent <div>s.
使用position: absolute;与top: 0;上<div>不要忘记添加position: relative;到他们的父母<div>秒。
Solution
解决方案
.portfolio_description {
position: absolute;
top: 0;
width: 100%;
background-color: white;
}
You also need a new class that you need to add to the parent elements of the <div>s that have the .portfolio_descriptionclass.
您还需要一个新类，您需要将其添加到<div>具有.portfolio_description该类的s的父元素中。
.portfolio-block {
position: relative;
}
Explanation
解释
The MDN docs on position: relative;states:
The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).
绝对定位元素相对于其最近的定位祖先（即最近的非静态祖先）进行定位。
Also, the MDN docs on topstates:
When position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block.
当 position 设置为 absolute 或 fixed 时， top 属性指定元素的顶部边缘与其包含块的顶部边缘之间的距离。
So you need absolute positioning and because that is positioned relatively to the nearest non static ancestor, you need to make the parent elements relatively positioned, because that positioning is not static and will keep the element flow intact. Then just make sure the topproperty is set to 0so there is no distance between the <div>and its containing block.
所以你需要绝对定位，因为它是相对于最近的非静态祖先定位的，你需要使父元素相对定位，因为该定位不是静态的，并且会保持元素流完整。然后只需确保该top属性设置为和它的包含块0之间没有距离<div>。
Demo
演示
In this example I used a semi-transparent background to prove that it is over the image.
在这个例子中，我使用了一个半透明的背景来证明它在图像上。
.portfolio_description {
position:absolute;
width:100%;
top:0;
background-color:rgba(255, 255, 255, 0.5);
}
.portfolio-block {
position: relative;
}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 portfolio-block">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
<div class="col-md-6 portfolio-block">
<img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p> <span class="read_more"></span>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->回答by Vetm
Got it working with the following CSS:
让它与以下 CSS 一起工作：
.portfolio_description {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
回答by roo2
You'll have to use absolute positioning, something like this
你必须使用绝对定位，像这样
.col-md-6 {
position: relative;
}
. portfolio_description{
position: absolute;
width: 100%;
bottom: 0px;
hieght: 60px;
}
回答by Nickfmc
You should use a background image instead of inline images, adjust your code like below then add your image as a background image in your CSS, this gives you a lot more flexibility. this way you can absolutely position everything inside your #portfolio1 div
你应该使用背景图片而不是内嵌图片，像下面这样调整你的代码，然后在你的 CSS 中添加你的图片作为背景图片，这给了你更多的灵活性。通过这种方式，您绝对可以将所有内容放置在 #portfolio1 div 中
<div class="col-md-6">
<div id="portfolio1">
<div class="portfolio_description">
<h2>Heading</h2>
<p>Some random tekst blablabla</p>
<span class="read_more"></span>
</div>
</div>
</div>
回答by Arun Agarwal
add the style=" padding-left: 0px ; padding-right: 0px;" in the col-md-6 or in whichever column div u are adding your image , the padding will fix the image entirely in the column without any before and after gap
添加样式=" padding-left: 0px ; padding-right: 0px;" 在 col-md-6 或您添加图像的任何列 div 中，填充会将图像完全固定在列中，前后没有任何间隙
