Question

我正在尝试在图像上放置一个全宽<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应如何组成的任何建议？

Answer 1

TL;博士

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

解决方案

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

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

.portfolio-block {
    position: relative;
}

说明

MDN docs on position: relative;州：

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

此外，MDN docs on top州：

当position设置为absolute或fixed时，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 -->

Answer 2

使用以下CSS：

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

Answer 3

您必须使用绝对定位something like this

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

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

Answer 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>

Answer 5

添加style =＆＃34; padding-left：0px; padding-right：0px;＆＃34;在col-md-6中或在您添加图像的任何列中，填充将完全将图像固定在列中而没有任何前后间隙

Bootstrap 3 div响应图像

5 个答案:

TL;博士

解决方案

说明

演示