在CSS中将图像叠加在具有可变高度的图像上

Question

我有一个图像(base.jpg),其中包含以下css:

.thumb-image {
padding: 0;
border: none;
margin: 0 auto 5px;
display: block;
width: 205px;
background: #EEE;
color: #8A8989;
border-image: initial;}

<img class="thumb-image" src="base.jpg" alt="" onerror="this.src='thumb.png'">

图像高度是可变的.无论如何,我可以通过在上面的CSS中添加另一个类声明,在右下角的base.jpg上叠加另一个图像(overlay.png,这是红色图像)吗？

非常感谢

Answer 1

你需要一个包装div,然后绝对定位角图像.

<div id="wrap">
    <img src="img/big.jpg" class="big" alt=""/>
    <img src="img/corner.jpg" class="corner" alt=""/>
</div>

#wrap { position: relative; }
.big, .corner { display: block; }
.corner { position: absolute; right: 0; bottom: 0; }