Добавить изображение поверх другого на основе класса CSS

Question

У меня есть куча тегов img на одной из страниц моего сайта.Я хочу иметь возможность добавить пользовательское изображение поверх нескольких из этих изображений на основе примененного к ним класса css

Так что в случае приведенных ниже утверждений

<img src="image_path"/>
<img class="newclass" src="image_path"/>

я хочуеще одно изображение добавлено поверх второго изображения и ничего на первом изображении.

Могу ли я сделать это с помощью CSS?

Спасибо.

Почему я хочусделать это так

Я могу сделать это с помощью 2 тегов img.Но мне было бы легче вносить изменения и добавлять больше изображений, просто добавив имя класса в тег img, а не добавив еще один тег img в будущем.

Answer 1

Лучше всего иметь родительский элемент для вашего изображения.Вот как вы можете сделать это с помощью ссылок (или любого другого элемента):

.newclass {
    background:url(2.jpg) no-repeat;
    display:inline-block
}
.newclass img {
    position:relative;
    z-index:-1
}

<a href="#"><img src="1.jpg" /></a>
<a class="newclass" href="#"><img src="1.jpg" /></a>

Это прекрасно работает в IE5.5, IE6, IE7, IE8 и Safari 5 (браузеры, которые я тестировал).

Редактировать: тридцатка заметила, что это не работает, если у вас есть родительский контейнер с цветом фона (из-за z-index на изображениях).Смотрите комментарии.

Answer 2

Нет, вы не можете сделать это в чистом CSS только с одним img элементом.

:after - это то, что вы * * * использовали бы *но это не работает для img элементов :

Примечание.Эта спецификация не полностью определяет взаимодействие: before и: after с замененными элементами (такими как IMG в HTML).Это будет определено более подробно в будущей спецификации.

---

Вы могли бы сделать это, добавив содержащий элемент и используя :after для этого.*

Он работает "везде" http://caniuse.com/#feat=css-gencontent - за исключением IE7.

По какой-то причине это конкретное использование :after также не работает в IE8.Это наконец работает в IE9.

http://jsfiddle.net/AQHnA/

<div class="newclass"><img src="http://dummyimage.com/100x100/ccc/fff" /></div>

.newclass {
    position: relative;
    float: left
}
.newclass img {
    display: block
}
.newclass:after {
    background: url(http://dummyimage.com/32x32/f0f/fff);
    width: 32px;
    height: 32px;
    display: block;
    content: ' ';
    position: absolute;
    bottom: 0;
    right: 0
}