使圖像比背景顏色更高

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>