Bootstrap 3：图像上的文本叠加 [英] Bootstrap 3: Text overlay on image

问题描述

我使用的bootstrap 3缩略图如下：

I am using bootstrap 3 thumbnail as follows:

        <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>

我想将标题但在 Mashable.com 上执行的方式

I want the caption to overlay on image but the way being done on 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;
}

如何在图片上方覆盖标题 div，就像Mashable.com一样？

How can i overlay a caption div on top of image but just like Mashable.com ?

推荐答案

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

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;

}

给它顶部和左边0将使它出现在左上角。

Giving it top and left 0 will make it appear in the top left corner.

这篇关于Bootstrap 3：图像上的文本叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！