Bootstrap 3 CSS图像标题覆盖 [英] Bootstrap 3 CSS image caption overlay

问题描述

我使用引导并且有一个问题，以覆盖图片上的标题，标题div只是不能放在框中，如下所示：

I use bootstrap and having a problem to overlay caption over an image, the caption div just cannot fit within the box, as shown below:

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解决了这个问题。

Thanks to @himanshu to solved the issue.

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

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

推荐答案

而不是重叠， div.desc 是绝对的，image是它的兄弟。因此，overlay将不会跟随图片，它将只跟随锚标签或您的 div.wrapper 。

I think problem is in placement rather then overlay, div.desc is absolute and image is its sibling. So overlay will not follow image it will follow only anchor tag or your div.wrapper.

最好的解决方案是把 desc

The best solution is to put desc and image in another div with 100% width with 0 padding.

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

这篇关于Bootstrap 3 CSS图像标题覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！