Bootstrap 3 CSS图像标题覆盖

Question

我使用Bootstrap，并且在将标题叠加在图像上时遇到了问题，标题

无法适应盒子内部，如下所示：

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

- conmen

---

尝试在p.desc_content类中使用box-sizing: border-box; - Vitorino fernandes

@Vitorino Fernandes，没有运气！ - conmen

尝试移除 width:100% 并为 div.desc 添加 left:0; right:0; - Vitorino fernandes

@Vitorino Fernandes，请查看我的编辑后的帖子。 - conmen

为div.desc添加left:0; right:0; - Vitorino fernandes

Answer 1

对于其他想要在Bootstrap中在图像上叠加标题的人，请考虑使用轮播（carousel）标题。

查看此处：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>

- jazz

Answer 2

我认为问题在于定位而不是覆盖，div.desc 是绝对定位的，而图片是它的同级元素。因此覆盖层不会跟随图片移动，只会跟随锚点标签或者你的 div.wrapper。

从我所看到的来看，图片上有一个 margin 或者锚点标签或者包裹器中有一个 padding。

最好的解决方案是将 desc 和图片放在另一个 100% 宽度、0 padding 的 div 中。

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

- himanshu

---

使用div.desc{width:100%;} - himanshu

位置：相对；.fix{ 宽度：100％； 填充：0像素； 位置：相对； } - Cavid

Answer 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;
 }

- DracSkywalker

Answer 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);
}

- Vitorino fernandes

Answer 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;
}

- pcodex