Html 将背景图像放置在图像上

我试图把一个背景图像放在一个图像上

基本上，这是为了显示“用户”是否批准或拒绝了某些内容

如果批准，我希望在用户显示图像上显示绿色勾号

我试图创造它，但我所拥有的一切都不起作用

这就是我到目前为止所做的：

Html

有关工作示例，请参见JSFIDLE

背景图像位于前景内容后面。一个

.image容器{
位置：相对位置；
}
.图像容器.小轮廓图像{
位置：相对位置；
z指数：2；
}
.图像容器。已批准{
位置：绝对位置；
z指数：3；
顶部：50px；
左：50px；
}

背景图像位于前景内容后面。一个

.image容器{
位置：相对位置；
}
.图像容器.小轮廓图像{
位置：相对位置；
z指数：2；
}
.图像容器。已批准{
位置：绝对位置；
z指数：3；
顶部：50px；
左：50px；
}

为什么不使用position:absolute

HMTL

---

为什么不使用position:absolute

HMTL

设置

.wrap{
    position:relative;
    background:red;
    height:auto; width:30px;
    font-size:0
}
.wrap > img{
        width:30px;
        display:inline;
    }
.inner{
        position:absolute; 
        top:30%; 
        left:50%;
        margin:-5px 0 0 -9px
}

然后设置left、top（如果需要，可设置底部、右侧）属性。

设置

.wrap{
    position:relative;
    background:red;
    height:auto; width:30px;
    font-size:0
}
.wrap > img{
        width:30px;
        display:inline;
    }
.inner{
        position:absolute; 
        top:30%; 
        left:50%;
        margin:-5px 0 0 -9px
}

---

然后设置left，top（如果需要，可以设置bottom，right）属性。

解决方案是在

接受的
类的
伪元素之后使用包装器：

position:absolute

HTML



解决方案是在
接受的
类的
伪元素之后使用
包装器：

position:absolute

HTML



是的，我会走另一条路。
接受img后，更改img的类别

HTML:

是的，我会走另一条路。
接受img后，更改img的类别

HTML:

此问题的最佳解决方案。此问题的最佳解决方案。
.wrap{
    position:relative;
    background:red;
    height:auto; width:30px;
    font-size:0
}
.wrap > img{
        width:30px;
        display:inline;
    }
.inner{
        position:absolute; 
        top:30%; 
        left:50%;
        margin:-5px 0 0 -9px
}

position:absolute

.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;
}

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

<div class='holder'>
    <img  class='unaccepted' src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" alt="">    
</div>

    .small-profile-img{
        width:30px;
        display:inline;
        border:2px solid #000000;
    }
.holder{
    width:40px;
    height:30px;
    background-image:url("http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif");
    background-size: 100%, 100%;
    background-repeat:no-repeat;
    background-position:center;
    text-align: center;
}

    .accepted{
        border:none;
        display:inline;
    }
.unaccepted{
    display:none;
}