html - 如何将图像放置在图像上？

Question

我正在为响应式网站工作。我想将小图像放在大图像上。小图像应放置在大图像的正中心。我无法将大图像作为页面背景。它应该在div内部。怎么办？

JSFIDDLE

//code
<div class="text-center">
    <img id="draggable1" class="img-responsive" src="http://photos.foter.com/a266/freestanding-wood-and-wire-pet-gate-size-21-width-narrow-span-2658163_300x300.jpg">
       <img class="heartimg" src="http://gorgeousme.co/media/19340/heart_50x42.jpg"/>
    </img>
</div>

Answer 1

在心脏img上使用绝对定位

JSFiddle Demo

CSS

.text-center {
    display: inline-block;
    border:1px solid grey;
    position: relative;
}

.text-center img {
    display: block;
}

.text-center .heartimg {
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-25px; /* half of it's height */
    margin-left:-21px; /* half of it's width */
}