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

前端之家收集整理的这篇文章主要介绍了在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; }

猜你在找的CSS相关文章