css中的其他圖像重疊一個圖像

Question

我有2個圖像，我必須在另一個圖像上顯示一個圖像。我需要顯示如下2個圖像。

以下是我已經試過的代碼，它沒有準備好。可以幫助我解決這個問題嗎？

.my_banner{ 
 
    background-image: url('http://i.stack.imgur.com/E4s7Z.gif'); 
 
    background-repeat: no-repeat; 
 
    position:absolute; 
 
    top: 0px; 
 
    left: 150px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 100; 
 
}

<div> 
 
    <img class="my_banner"></img> 
 
    <img src="http://i.stack.imgur.com/rQ8Ku.jpg" width="100%" height="100%"></img> 
 
</div>

Answer 1

您可以使用position: absoulute;，並調整頂部和左側，以適應它。

.block { 
 
    position: relative; 
 
} 
 

 
.overlap { 
 
    position: absolute; 
 
    width: auto; 
 
    height: 60%; 
 
    top: 15%; 
 
    left: 13%; 
 
    z-index: 100; 
 
}

<div class="block"> 
 
<img src="http://i.stack.imgur.com/rQ8Ku.jpg" width="100%" height="100%" /> 
 
<img class="overlap" src="http://i.stack.imgur.com/E4s7Z.gif" /> 
 
</div>

Answer 2

試試這個https://jsfiddle.net/2Lzo9vfc/8/

HTML

<div class="banner"> 
    <img src='http://i.stack.imgur.com/E4s7Z.gif' alt=""> 
</div> 

CSS

.banner { 
    background: url('http://i.stack.imgur.com/rQ8Ku.jpg'); 
    background-size: 100% auto; 
    background-position: top center; 
    position: relative; 
    background-repeat: no-repeat; 
    height: 200px; 
} 

.banner img { 
    left: 12%; 
    position: absolute; 
    width: 12%; 
}