在图像上放置一个背景图像

基本上它显示，如果'用户'已批准或拒绝的东西。

我想要是否允许在用户显示图像上显示绿色勾号。

我试图创建它，但我有什么不工作。

这是我到目前为止有：

的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

来源

2013-03-15 Eli Stone

见dfsq的回答 – 2013-03-15 11:49:37

解决办法是是使用包装与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-15 10:39:45 dfsq

最佳针对此问题的解决方案。 – 2013-03-15 11:48:56

背景图像去背后前景内容。 <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-15 10:34:28 Quentin

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

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 
}

DEMO

来源

2013-03-15 10:36:31 Sowmya

集

position:absolute

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

来源

2013-03-15 10:37:09 Kautil

是啊，我会去周围的其他方式。在接受时更改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-15 10:54:07

在图像上放置一个背景图像

回答

相关问题