在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; }

Answer 2

只有.thumb-image，你无能为力。如果您稍微修改HTML，则可以相当轻松地完成此操作。我在这里举了一个例子：http://jsfiddle.net/imsky/AsUuh/

这适用于IE8 +（带有doctype），以及所有其他现代浏览器，通过使用：before和生成的内容。您可以将其转换为不使用现代功能，但这意味着在每个容器中包含额外的DIV。顺便说一下，：之前不能使用IMG标签，所以这是尽可能少的标记。

HTML：

<div class="thumb-container">
<div class="thumb-image">
<img src="http://placekitten.com/205/300">
</div>
</div>

CSS：

.thumb-image {
    margin:0 auto 5px;
    width:205px;
    background:#EEE;
    color:#8A8989;
    border-image:initial;
    position:relative;
    z-index:0
}
.thumb-image img {
    border:0;
    display:block;
    width:100%
}
.thumb-container {
    position:relative
}

.thumb-image:before {
    content:"";
    display:block;
    position:absolute;
    width:100px;
    height:100px;
    bottom:0px;
    right:0px;
    z-index:1;
    background:url(http://placekitten.com/100)
}