[英]Bootstrap 3: Text overlay on image
I am using bootstrap 3 thumbnail as follows: 我使用bootstrap 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 caption
to 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 caption
div on top of the image but just like (Mashable.com)? 如何在图像顶部覆盖
caption
div,但就像(Mashable.com)一样?
This works but I want it centered just like Mashable. 这有效,但我希望它像Mashable一样居中。 and centered for every image.
并以每个图像为中心。 for some images, it is not centered.
对于某些图像,它不是居中的。
You need to set the thumbnail class to position relative then the post-content to absolute. 您需要将缩略图类设置为相对位置,然后将后内容设置为绝对。
.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. 给它顶部和左侧0会使它出现在左上角。
Is this what you're after? 这就是你要追求的吗?
http://jsfiddle.net/dCNXU/1/ http://jsfiddle.net/dCNXU/1/
I added : text-align:center
to the div and image 我添加了:
text-align:center
到div和image
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.