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

我有一个图像(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中添加另一个类声明来使用css在右下角的base.jpg上覆盖另一个图像(overlay.png,这是红色图像)吗？

非常感谢

解决方法

你需要一个包装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; }

原文地址：https://www.jb51.cc/css/215466.html