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

背景图片在前景内容后面。 <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 2

解决方案是对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 3

为什么不使用position：absolute

HTML

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

<强> DEMO

Answer 4

组

position:absolute

然后设置左侧，顶部（底部，右侧，如果需要）属性。

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

在图像上放置背景图像

5 个答案: