0

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

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

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

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

这是我到目前为止所拥有的：

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

4

5 回答 5

2

背景图像位于前景内容的后面。An<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;
}
于 2013-03-15T10:34:28.297 回答
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/

于 2013-03-15T10:39:45.667 回答
0

你为什么不使用位置：绝对

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
}

演示

于 2013-03-15T10:36:31.463 回答
0

放

position:absolute

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

于 2013-03-15T10:37:09.587 回答
0

是的，我会反过来。接受时更改 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;
}
于 2013-03-15T10:54:07.310 回答