Overlay hình ảnh trên hình ảnh với chiều cao biến trong CSS

Question

Tôi có một hình ảnh (base.jpg) trong đó có các css sau:

.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'"> 

Hình ảnh chiều cao có thể thay đổi. Có anyway tôi có thể che phủ một hình ảnh (overlay.png đó là hình ảnh màu đỏ) trên đầu trang của base.jpg ở góc dưới bên phải bằng cách sử dụng css bằng cách thêm một tuyên bố lớp học để css trên?

Rất cám ơn

Answer 1

Bạn cần một div wrapper và vị trí sau đó tuyệt đối hình ảnh góc.

<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

Bạn không thể làm gì với chỉ .thumb-image. Nếu bạn sửa đổi HTML một chút, bạn có thể thực hiện điều này khá dễ dàng. Tôi đã đưa ra một ví dụ ở đây: http://jsfiddle.net/imsky/AsUuh/

Công trình này IE8+ (với DOCTYPE) và trên tất cả các trình duyệt hiện đại khác, bằng cách sử dụng: trước và tạo nội dung. Bạn có thể chuyển đổi nó để sử dụng không có tính năng hiện đại, nhưng điều đó có nghĩa là bao gồm một DIV phụ bên trong mỗi container. Là một sang một bên, trước đây không hoạt động trên các thẻ IMG, do đó, điều này càng ít đánh dấu càng tốt.

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) 
}