Bootstrap 3 CSS图像标题覆盖答案

【问题标题】：Bootstrap 3 CSS image caption overlayBootstrap 3 CSS图像标题覆盖
【发布时间】：2014-11-18 13:18:39
【问题描述】：

我使用 bootstrap 并在图像上覆盖标题时遇到问题，标题 div 无法放入框内，如下所示：

HTML：

<div class="col-sm-4">
    <a href="#">
        <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div>
    </a>
</div>

<div class="col-sm-4">
    <a href="#">
        <img src="images/upload/projects/21/cake.png" class="img-responsive" alt="">
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div>
    </a>
</div>

CSS：

div.desc{
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #000;
    color: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

解决方案：

感谢@himanshu 解决了这个问题。

div.desc{
    background-color: #000;
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 100%;
}

.fix{
    width: 100%;
    padding: 0px;
}

【问题讨论】：

尝试使用 box-sizing:border-box;对于 p.desc_content 类
@Vitorino Fernandes，不走运！
尝试删除 width:100% 并添加 left:0;对：0；对于 div.desc
@Vitorino Fernandes，请查看我编辑的帖子。
加左：0；对：0；对于 div.desc

标签： css twitter-bootstrap-3 image-gallery

【解决方案1】：

我认为问题在于放置而不是覆盖，div.desc 是绝对的，而图像是它的兄弟。所以覆盖不会跟随图像它只会跟随锚标签或你的div.wrapper。

据我所知，图像上有边距，或者锚点或包装器中的填充。

最好的解决方案是将desc 和图像放在另一个div 中，宽度为100%，填充为0。

<div class="col-sm-4 wrapper">
    <a href="#">
<div class="fix">
        <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
        <div class="desc">
            <p class="desc_content">The pack, the basic unit of wolf social life.</p>
        </div></div>
    </a>
</div>

CSS：

.fix{width:100%; padding:0px;}

【讨论】：

使用 div.desc{width:100%;}
给出位置：相对； .fix{ 宽度：100%;填充：0px；位置：相对； }

【解决方案2】：

对于其他尝试在 Bootstrap 中的图像上叠加标题的人，请考虑使用轮播标题。

请看这里：http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

  <div class="carousel-caption">
    <h3>Chania</h3>
    <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
  </div>

【讨论】：

【解决方案3】：

试试这个

 <div class="wrapper">
    <div class="">
        <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" >
    </div>
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div>
 </div>
 <div class="wrapper">
    <div class="">
         <img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" >
    </div>
    <div class="desc_content" style="">The pack, the basic unit of wolf social life.</div>
 </div>

css

div.desc_content {
background-color: #000;
color: #FFF;
font: bold 11px verdana;
padding-left: 10px;
padding-top: 7px;
height: 23px; opacity: 0.7;
position: relative; 
top: -30px;
}
div.wrapper{
    float: left;
    position: relative;
    margin: 10px;
 }

【讨论】：

【解决方案4】：

将此属性用于 div.desc 类

div.desc{
    position: absolute;
    bottom: 0;
    background-color: #000;
    color: #fff;
    opacity: 0.5;
    left:0;   /** new  **/
    right:0;  /** new  **/
    filter: alpha(opacity=50);
}

【讨论】：

【解决方案5】：

这对我有用。有了它，您将在图像底部找到标题。

<div class="container-fluid">   
    <img src="someimg.jpg" class="img-fluid " alt="Patience">   
    <div class="carousel-caption d-block">
        <h1>Some label</h1>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
</div>

如果您希望它位于顶部，则在您的 CSS 中执行以下操作：

.carousel-caption{
top:0;
bottom:auto;
}

【讨论】：