使用CSS叠加图像

Question

我有以下图片：

和

并使用css我需要在网页上将它们显示为一个图像：

即。较小的图像位于其上方较大图像的右下角。

较大图像的大小不是静态的 - 每次重新加载页面时图像都会不同。

Answer 1

使用<div>将图像包裹在display:inline-block; position: relative s中。然后你可以绝对定位你的小徽章图像。例如：

<div class="wrapper">
    <img src="http://placekitten.com/200/200" width="200" height="200">
    <img src="http://placekitten.com/50/50" width="50" height="50" class="badge">
</div>
<div class="wrapper">
    <img src="http://placekitten.com/250/200" width="250" height="200">
    <img src="http://placekitten.com/25/50" width="25" height="50" class="badge">
</div>

和

.wrapper {
    display: inline-block;
    position: relative;
    line-height: 0;
}
.badge {
    position: absolute;
    bottom: 0;
    right: 0;
}

实时版本：http://jsfiddle.net/ambiguous/sEH6L/

display: inline-block和line-height将<div>紧紧包裹在主图像周围，以使其与图像具有相同的尺寸，需要position: relative徽章position: absolute;然后你绝对将徽章放在<div>的右下角，你已经完成了。

Answer 2

在您的具体示例中，灯泡可以是透明的png。在这种情况下，为什么不为灯泡的background-image标签设置<img>？

img.tick { background: url(tick.png) 100% 100% no-repeat; }

为了使图像之间的距离合适，您也可以随时为元素添加填充。

http://jsfiddle.net/HM7F2/