相关疑难解决方法(0)

Bootstrap 3 CSS图像标题叠加

我使用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>
Run Code Online (Sandbox Code Playgroud)

CSS:

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

解:

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

div.desc{
    background-color: #000;
    bottom: 0;
    color: #fff;
    left: 0;
    opacity: 0.5;
    position: …
Run Code Online (Sandbox Code Playgroud)

css image-gallery twitter-bootstrap-3

12
推荐指数
1
解决办法
5万
查看次数

标签 统计

css ×1

image-gallery ×1

twitter-bootstrap-3 ×1