使图像高于背景颜色

Question

我想制作一个横幅，右边有一个带透明背景的图像，左边有一些文字和按钮。

我制作了一个包含文本的两列布局，另一个包含在大屏幕上水平显示的图像，并在较小的屏幕上反向堆叠。下一步我想为这两列添加一些背景颜色，使它们看起来像一个实体。但是我希望图像溢出顶部的背景颜色以便

looks some thing like this

But My current design looks like this:

这是我的代码：

＆＃13;

＆＃13;

.row {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
}

.textstyle h1 {
    font-size: 25px;
    font-weight: 700;
    color: #484848;
    line-height: 30px;
}

.textstyle p {
    font-size: 18px;
    font-weight: 200;
    color: #484848;
}

.imgbox {
    width: 100%;
    height: 400px;
}

.captionbox {
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
}

.backcolor {
    background-color: #ccc;
    width: 100%;
    height: 400px;
}

.mybutton {
    cursor: pointer;
    background: #00A699 !important;
    color: #fff;
    border-radius: 20px;
    width: 200px;
    padding: 10px;
    font-size: 16px;
}

@media (max-width: 1000px) {
    .captionbox {
        padding-top: 10px;
    }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

<div class="row">

    <div class="backcolor">
        <div class="col-md-7 col-md-push-5">
            <div class=""><img src="http://i.imgur.com/GguXEnF.png" class="imgbox"></div>
        </div>
        <div class="col-md-5 col-md-pull-7">
            <div class="textstyle captionbox">
                <h1>Hosting Opens Up a world of opportunity</h1>
                <p>Earn Money Sharing Your Extra Space with Travellers.</p>
                <a href="https://google.com" target="_blank" class="btn btn-default mybutton">See What You Can Earn</a>
            </div>
        </div>
    </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我尝试在顶部使用填充和边距但不起作用，请提出解决方案。

Answer 1

使用位置使其高于上方并增加图像高度。

.imgbox{
   width: 100%;
   height: 430px;
   position: absolute;
   top: -30px;
 }

.row{
   background-color: #fff;
   padding-top: 20px;
   padding-bottom: 10px;
}
.textstyle h1{
   font-size: 25px;
   font-weight: 700;
   color:#484848;
   line-height: 30px;
}
.textstyle p{
   font-size:18px;
   font-weight:200;
   color:#484848;
}
.imgbox{
width: 100%;
height: 430px;
position: absolute;
top: -30px;
}
.captionbox{
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
}
.backcolor{
background-color: #ccc;
width: 100%;
height: 400px;
}
.mybutton{
cursor: pointer;
background: #00A699 !important;
color: #fff;
border-radius: 20px;
width:200px;
padding:10px;
font-size: 16px;
}
@media (max-width: 1000px){
.captionbox{
    padding-top: 10px;
 }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

            <div class="row">
                
                <div class="backcolor">
                <div class="col-md-7 col-xs-7 col-md-push-5 col-xs-push-5"><div class=""><img src="http://i.imgur.com/GguXEnF.png" class="imgbox"></div></div>
                <div class="col-md-5 col-xs-5 col-md-pull-7 col-xs-pull-7">
                    <div class="textstyle captionbox">
                    <h1>Hosting Opens Up a world of opportunity</h1>
                        <p>Earn Money Sharing Your Extra Space with Travellers.</p>
                        <a href="https://google.com" target="_blank" class="btn btn-default mybutton">See What You Can Earn</a>
                    </div>
                </div>
                </div>
            </div>
        </div>