css - Bootstrap 3 CSS 图像标题覆盖

Question

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

Answer 1

我认为问题在于放置而不是覆盖，div.desc 是绝对的，图像是它的兄弟。因此叠加层不会跟随图像，它只会跟随 anchor 标记或您的 div.wrapper。

据我所知，图像上有边距， anchor ​​或包装器中有填充。

最好的解决方案是将 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;}