在图像上放置一个背景图像
问题描述:
我试图在图像上放置背景图像。在图像上放置一个背景图像
基本上它显示,如果'用户'已批准或拒绝的东西。
我想要是否允许在用户显示图像上显示绿色勾号。
我试图创建它,但我有什么不工作。
这是我到目前为止有:
的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的工作示例。
答
解决办法是是使用包装与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>
+0
最佳针对此问题的解决方案。 – 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;
}
答
你为什么不使用的位置是:绝对
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
}
答
集
position:absolute
然后设置左边,顶部(底部,如果需要,右边)属性。
答
是啊,我会去周围的其他方式。 在接受时更改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;
}
见dfsq的回答 – 2013-03-15 11:49:37