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