Bootstrap 3 CSS 图像标题叠加 [英] Bootstrap 3 CSS image caption overlay

问题描述

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

HTML:

<a href="#"><img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt=""/><div class="desc"><p class="desc_content">狼群，狼社会生活的基本单位.</p>
</a>

<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">狼群，狼社会生活的基本单位.</p>

</a>

CSS:

div.desc{位置:绝对；底部:0px；宽度:100%；背景色:#000；颜色:#fff;不透明度:0.5；过滤器:阿尔法(不透明度= 50)；}

解决方案:

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

div.desc{背景色:#000；底部:0；颜色:#fff;左:0；不透明度:0.5；位置:绝对；宽度:100%；}.使固定{宽度:100%；填充:0px；}

解决方案

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

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

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

<a href="#"><div class="fix"><img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt=""/><div class="desc"><p class="desc_content">狼群，狼社会生活的基本单位.</p></div></div></a>

CSS:

.fix{width:100%;填充:0px;}

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

SOLUTION:

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

解决方案

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.

From what I can see is that there is a margin on image or padding in anchor or wrapper.

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屋！