Bootstrap 3:图像上的文本覆盖

Question

我使用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>

我希望caption覆盖图像,但在Mashable.com上的方式

我试过以下但没有运气:((

.post-content {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 0.5;
    margin: -54px 20px 12px; 
    position: relative;
}

如何caption在图像顶部覆盖div,但就像(Mashable.com)一样？

这有效,但我希望它像Mashable一样居中.并以每个图像为中心.对于某些图像,它不是居中的.

Answer 1

您需要将缩略图类设置为相对位置,然后将后内容设置为绝对.

检查这个小提琴

.post-content {
    top:0;
    left:0;
    position: absolute;
}

.thumbnail{
    position:relative;

}

给它顶部和左侧0会使它出现在左上角.

Answer 2

这就是你要追求的吗？

http://jsfiddle.net/dCNXU/1/

我补充说:text-align:centerdiv和image