使图像比背景颜色更高

Question

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

我做了一个包含文本和其他包含图像水平显示在大屏幕上的图像和反向堆叠在较小screen.next上的两列布局一，我想添加一些背景颜色的两列，使他们看起来像一个实体。但是我想要的形象溢出顶部的背景颜色，使其

looks some thing like this

But My current design looks like this:

这里是我的代码：

.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; 
 
    } 
 
}

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

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

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>