Наложение изображений с помощью CSS

Question

У меня есть следующие изображения:

и

, и с помощью CSS мне нужно показать их на веб-странице как одно изображение:

Т.е. меньшее изображение находится в правом нижнем углу большего изображения сверху.

Размер большего изображения не является статичным - изображение будет отличаться при каждой перезагрузке страницы.

Answer 1

Оберните изображения в <div> с display:inline-block; position: relative.Тогда вы можете абсолютно точно расположить свои маленькие значки изображений.Например:

<div class="wrapper">
    <img src="http://placekitten.com/200/200" width="200" height="200">
    <img src="http://placekitten.com/50/50" width="50" height="50" class="badge">
</div>
<div class="wrapper">
    <img src="http://placekitten.com/250/200" width="250" height="200">
    <img src="http://placekitten.com/25/50" width="25" height="50" class="badge">
</div>

И:

.wrapper {
    display: inline-block;
    position: relative;
    line-height: 0;
}
.badge {
    position: absolute;
    bottom: 0;
    right: 0;
}

И живая версия: http://jsfiddle.net/ambiguous/sEH6L/

display: inline-block и line-height будут плотно обернуты <div> вокруг основного изображения, чтобы он имел тот же размер, что и изображение, position: relative необходим для position: absolute на значках;затем вы абсолютно позиционируете значок в правом нижнем углу <div> и все готово.

Answer 2

В вашем конкретном примере лампочка может быть прозрачным png.В таком случае, почему бы просто не установить background-image для тега <img> для лампочки?

img.tick { background: url(tick.png) 100% 100% no-repeat; }

Чтобы получить правильное расстояние между изображениями, вы также всегда можете добавить отступы к элементу.

http://jsfiddle.net/HM7F2/