html - 在图像上放置背景图像

Question

我正在尝试将背景图像放在图像上。

基本上它显示“用户”是否批准或拒绝了某事。

如果获得批准，我希望在用户显示的图像上显示一个绿色勾号。

我尝试创建它，但我所拥有的不起作用。

这是我目前所拥有的:

HTML

<img class="small-profile-img accepted" src="http://www.image.com/image.gif" alt="">

CSS

.small-profile-img{
    width:30px;
    display:inline;
    border:2px solid #000000;
}

.accepted{
    background-image:url("tick.png") !important;
    background-repeat:no-repeat;
    background-position:right bottom;
    z-index:100;
    background-size:18px;
}

有关工作示例，请参阅 jsfiddle。

jsfiddle

Answer 1

解决方案是对 accepted 类使用带有 after 伪元素的包装器:

.accepted:after {
    content: '';
    display: block;
    height: 18px;
    width: 18px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-image:url("http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 100;
    background-size: 18px;
}

HTML

<div class="small-profile-img accepted">
    <img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
</div>

http://jsfiddle.net/vpgjr/7/