30

我正在使用 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 一样居中。并以每个图像为中心。对于某些图像，它不是居中的。

4

4 回答 4

37

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

检查这个小提琴 

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

.thumbnail{
    position:relative;

}

给它 top 和 left 0 将使它出现在左上角。

于 2013-09-05T08:43:05.793 回答
7

这就是你所追求的吗？

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

我添加 :text-align:center到 div 和图像

于 2013-09-05T09:13:40.190 回答
1

将位置设置为绝对；将字幕区域移动到正确的位置

CSS

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

引导层

于 2013-09-05T08:43:46.213 回答
0

试试下面的例子。图像上带有文本的图像叠加层。 演示 

<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

.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; 
}
于 2015-08-08T19:24:22.007 回答