在具有在CSS

Question

可变高度图像叠加图像I具有的图像（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，它是红色图像），在上面的css中添加另一个类声明？

非常感谢

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和generated内容。您可以将其转换为不使用现代功能，但这意味着在每个容器中包含一个额外的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) 
}