在css中的另一个图像上重叠一个图像

Question

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