Html Bootstrap 3：图像上的文本叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18631530/
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: Text overlay on image
提问by DarthVader
I am using bootstrap 3 thumbnail as follows:
我正在使用引导程序 3 缩略图如下：
<div class="thumbnail">
<img src="/img/robot.jpg" alt="..." />
<div class="caption post-content">
<h3>Robots!</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
I want the captionto overlay on image but the way being done on Mashable.com
我想要caption叠加在图像上，但在Mashable.com上完成的方式
I have tried following but no luck :((
我试过以下但没有运气:((
.post-content {
background: none repeat scroll 0 0 #FFFFFF;
opacity: 0.5;
margin: -54px 20px 12px;
position: relative;
}
How can I overlay a captiondiv on top of the image but just like (Mashable.com)?
如何caption在图像顶部覆盖一个div 但就像 (Mashable.com) 一样？
This works but I want it centered just like Mashable. and centered for every image. for some images, it is not centered.
这有效，但我希望它像 Mashable 一样居中。并为每个图像居中。对于某些图像，它没有居中。
回答by Will
You need to set the thumbnail class to position relative then the post-content to absolute.
您需要将缩略图类设置为相对位置，然后将后内容设置为绝对位置。
Check this fiddle
检查这个小提琴
.post-content {
top:0;
left:0;
position: absolute;
}
.thumbnail{
position:relative;
}
Giving it top and left 0 will make it appear in the top left corner.
给它 top 和 left 0 将使它出现在左上角。
回答by SaturnsEye
Is this what you're after?
这是你追求的吗？
I added :text-align:centerto the div and image
我添加：text-align:center到 div 和图像
回答by Daniel
回答by aashish
try the following example. Image overlay with text on image. demo
试试下面的例子。图像上带有文字的图像叠加。 演示
<div class="thumbnail">
<img src="https://s3.amazonaws.com/discount_now_staging/uploads/ed964a11-e089-4c61-b927-9623a3fe9dcb/direct_uploader_2F50cc1daf-465f-48f0-8417-b04ac68a999d_2FN_19_jewelry.jpg" alt="..." />
<div class="caption post-content">
</div>
<div class="details">
<h3>Robots!</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
css
css
.post-content {
background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
opacity: 0.5;
top:0;
left:0;
min-width: 500px;
min-height: 500px;
position: absolute;
color: #ffffff;
}
.thumbnail{
position:relative;
}
.details {
position: absolute;
z-index: 2;
top: 0;
color: #ffffff;
}
