css - 使用 CSS 叠加图像

Question

我有以下图片:

和

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

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

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

Answer 1

将图像包裹在<div>中与 display:inline-block; position: relative .然后你就可以完全定位你的小徽章图像。例如:

<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>的右下角大功告成。