Bootstrap 3 div在响应图像上[重复]答案

【问题标题】：Bootstrap 3 div over responsive image [duplicate]Bootstrap 3 div在响应图像上[重复]
【发布时间】：2014-03-08 18:31:42
【问题描述】：

我正在尝试在图像上使用全宽 <div>，其中包含文本，以便文本覆盖图像本身。网格和图像是响应式的，我无法让<div> 成为网格的 100%。

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
            <div class="portfolio_description">
                <h2>Heading</h2>
                <p>Some random tekst blablabla</p> <span class="read_more"></span>
            </div>
        </div>
        <div class="col-md-6">
            <img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
            <div class="portfolio_description">
                <h2>Heading</h2>
                <p>Some random tekst blablabla</p> <span class="read_more"></span>
            </div>
        </div>
    </div>
    <!-- /.row -->
</div>
<!-- /.container -->

如您所见，我希望 portfolio_desciption 位于图像上方，填充网格 col-md-6 的宽度并具有白色背景。

关于如何编写我的 CSS 有什么建议吗？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

tl;博士

在<div> 上使用position: absolute; 和top: 0;，不要忘记将position: relative; 添加到其父<div>s。

解决方案

.portfolio_description {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: white;
}

您还需要一个新类，您需要将其添加到具有.portfolio_description 类的<div>s 的父元素中。

.portfolio-block {
    position: relative;
}

说明

MDN docs on position: relative; 声明：

绝对定位元素是相对于其最近的定位祖先（即最近的非静态祖先）定位的。

另外，MDN docs on top 声明：

当位置设置为绝对或固定时，top 属性指定元素的上边缘与其包含块的上边缘之间的距离。

所以你需要绝对定位，因为它是相对于最近的非静态祖先定位的，你需要使父元素相对定位，因为这种定位不是静态的，并且会保持元素流动不变。然后只需确保将top 属性设置为0，以便<div> 与其包含块之间没有距离。

演示

在这个例子中，我使用了一个半透明的背景来证明它在图像上方。

.portfolio_description {
    position:absolute;
    width:100%;
    top:0;
    background-color:rgba(255, 255, 255, 0.5);
}

.portfolio-block {
    position: relative;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-6 portfolio-block">
            <img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
            <div class="portfolio_description">
                <h2>Heading</h2>
                <p>Some random tekst blablabla</p> <span class="read_more"></span>

            </div>
        </div>
        <div class="col-md-6 portfolio-block">
            <img src="http://lorempixel.com/300/300/cats" class="img-responsive portfolio_frontpage" alt="">
            <div class="portfolio_description">
                <h2>Heading</h2>
                <p>Some random tekst blablabla</p> <span class="read_more"></span>

            </div>
        </div>
    </div>
    <!-- /.row -->
</div>
<!-- /.container -->

【讨论】：

我已经尝试过了，但是谢谢。当我这样做时的问题是它越过了网格 div，看起来像这样：prntscr.com/2rgox3
同样的问题，你解决了吗？只有当有白色透明背景时，演示才会看起来不错.. 演示中也有溢出，如果您将颜色更改为红色或任何非白色的东西，也可以看到

【解决方案2】：

可以使用以下 CSS：

.portfolio_description {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}

【讨论】：

【解决方案3】：

添加样式=" padding-left: 0px ; padding-right: 0px;"在 col-md-6 或您添加图像的任何列 div 中，填充将图像完全固定在列中，前后没有任何间隙

【讨论】：

【解决方案4】：

您应该使用背景图片而不是内联图片，像下面这样调整您的代码，然后将您的图片添加为 CSS 中的背景图片，这为您提供了更多的灵活性。这样你就可以绝对定位你的#portfolio1 div 中的所有内容

    <div class="col-md-6">
         <div id="portfolio1">
          <div class="portfolio_description">
            <h2>Heading</h2>
            <p>Some random tekst blablabla</p>
            <span class="read_more"></span>
          </div>
         </div> 
     </div>

【讨论】：

【解决方案5】：

你必须使用绝对定位，something like this

.col-md-6 {
    position: relative;
}

. portfolio_description{ 
    position: absolute;
    width: 100%;
    bottom: 0px;
    hieght: 60px;
}

【讨论】：