背景颜色在元素上消失

Question

我有两个推特引导3容器。第一个容器内部有一个简单的图像，第二个容器包含从 The Loop 加载的一些文本。我希望第二个容器与第一个容器稍微重叠一点。

我尝试为第二个容器设置一个负的lid-top，为第一个容器设置一个负的lid-down。它可以工作，至于移动文本，但是第二个容器的backder-Color只是不与图像重叠。只有文本会这样做。

看起来好像第二个容器的backder-Color消失在第一个容器的图像下。

你能帮我一下吗？我希望第二个容器的< code>background-color与第一个容器的图像重叠。就像对文本已经做的那样。

网页：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 singlePostCoverContainer">
            <?php the_post_thumbnail('full', array('class' => 'center-block singlePostCover')); ?>
        </div>
    </div>
</div>
<div class="container singlePost">
    <div class="row titleRow">
        <div class="col-sm-3 col-sm-push-9 col-xs-12">
            <p>TEST</p>
        </div>          
        <div class="col-sm-9 col-sm-pull-3 col-xs-12 post">
            <span class="catDescription">XXX</span>
            <h4><?php the_title(); ?></h4>
        </div>
    </div>
</div>

LESS（它正在被编译为CSS，对于了解CSS的人来说，阅读应该不是那么大的问题）：

div.singlePostCoverContainer {
    img {
        margin-bottom:-200px;
    }
}

.singlePost {
    background-color:white !important;
}

Answer 1

您应该为父容器设置< code>position:relative,为重叠行设置< code>position:absolute。

css lang-css prettyprint-override">.imagecontainer {
position:relative;
}	  
.titlerow{
width:100%;
position:absolute;
bottom:0;	
background-color:white;

/* see: http://stackoverflow.com/questions/11807286/how-to-make-div-background-color-transparent-in-css */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */
}
[class^="col-"] {
	padding: 0;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid imagecontainer">
<div class="row"><div class="col-xs-12"><img src="http://dummyimage.com/1500x600" class="img-responsive"></div></div>
<div class="row titlerow">
 <div class="col-sm-3 col-sm-push-9 col-xs-12">
            <p>TEST</p>
        </div>          
        <div class="col-sm-9 col-sm-pull-3 col-xs-12 post">
            <span class="catDescription">XXX</span>
            <h4>The title</h4>
        </div>	
</div>	

Answer 2

如注释中所述，相对定位第二个容器（具有标题的容器）足以让background颜色正确显示。

.singlePost{
    background: white;
    position: relative; /* added this */
    width: 100px; /* only for demo */
    margin-left: 40px; /* only for demo */
    margin-top: -200px; /* just removed the bottom margin on img and added this */
}

注意：我已经删除了img上的边距底，并在容器上添加了一个负的边距顶，但这种更改纯粹是可选的，因为无论哪种方式都可以。

CodePen演示