将背景图像放置在图像上

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

解决方案是使用带有

after

伪元素的包装器来表示

accepted

类：

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

Answer 2

背景图像位于前景内容后面。 <img>

 是前景内容。 

您可以看到背景图像的唯一方法是前景图像在背景图像上具有半透明像素。

不过，勾号似乎是内容（而不是装饰），因此无论如何它可能应该表示为

<img>

。

<div class="image-container">
    <img class="small-profile-img"
         src="http://www.image.com/image.gif" 
         alt="">
    <img class="approved"
         src="tick.png"
         alt="Approved">
</div>

.image-container { 
    position: relative;
}

.image-container .small-profile-img {
    position: relative;
    z-index: 2;
}

.image-container .approved {
    position: absolute;
    z-index: 3;
    top: 50px;
    left: 50px;
}

Answer 3

为什么不使用position:absolute

HMTL

<div class="wrap">
<img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="">
    <div class="inner"> <img src="http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png" width="18"/></div>
    </div>

CSS

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

演示

Answer 4

设置

position:absolute 然后设置 left，top（如果需要的话，bottom，right）属性。

Answer 5

是的，我会反过来。 接受后更改 img 的类。

HTML：

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

CSS：

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