将图像定位在图像内部

Question

我目前正在尝试将标志图标与用户个人资料图片结合起来。

为了您的理解，我有以下Spritesheet：

图标的位置应如下：

我在想一个包含user-profile-image的div容器/包装器，以及一些带有图标类的细分，这是最好的方法吗？

到目前为止我所拥有的（不是很有用，因为我只是使用html将图标放在userpic下面）

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 instrBox">
<div class="row">
    <div class="col-md-3 text-center visible-md visible-lg">
         [...]
    </div>
    <div class="col-md-6 col-sm-12 col-xs-12 text-center teamBlock">
        <img src="img/team/user.png" alt="" class="img-responsive" />
        Lorem Ipsum
    </div>
    <div class="col-md-3 pull-left visible-md visible-lg">
        <i class="sprite-team sprite-team-flag_lu"></i>
        <i class="sprite-team sprite-team-flag_fr"></i>
        <i class="sprite-team sprite-team-flag_pt"></i>
    </div>
</div>

@media (min-width: 992px) {
.instrBox {
    width: 23%;
    margin: 5px;
    margin-left: 10px;
}}

.teamBlock .img-responsive {
margin: 0 auto;
}

.sprite-team {
background-image: url("../img/team/sprite-team.png");
background-repeat: no-repeat;
display: block;
}

.sprite-team-flag_fr {
    width: 41px;
    height: 20px;
    background-position: -5px -5px;
}
....

目前看起来像这样，可能会添加一个带有负值的保证金？

谢谢

Answer 1

尝试将用户图标图像设置为“相对”，然后将标记图标设置为“绝对”。

然后使用＆＃39; top，left，right，down＆＃34;设置标志图标位置。属性。

For example

HTML

<div class="A">
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
</div>

CSS

.A {
  width: 400px;
  height: 400px;
  background-color: gold;
  position: relative;
}

.B { 
width: 100px;
height: 50px;
background-color: blue;
position: absolute;
top: 20px;
left: 350px;
}

.C { 
width: 100px;
height: 50px;
background-color: blue;
position: absolute;
top: 90px;
left: 350px;
}

.D { 
width: 100px;
height: 50px;
background-color: blue;
position: absolute;
top: 160px;
left: 350px;
}

Answer 2

这里的关键是在css后台位置。并且，我建议你使用透明的png，这样当你将标志叠加在圆角矩形上时，你就不会得到白色背景。

#container{
	background: url(http://i.stack.imgur.com/Ez7w1.png);
	width: 134px;
	height: 135px;
	background-position-x: -150px;
}
#container div {
	background: url(http://i.stack.imgur.com/Ez7w1.png);
    width: 50px;
    height: 28px;
    position: relative;
    right: -110px;
    margin-bottom: 3px;
    top: 17px;
}
#container div:nth-child(1){
	background-position: -100px 0px;
}
#container div:nth-child(2){
	/*no positioning needed in this example*/
}
#container div:nth-child(3){
	background-position: 0px -32px;
}

<div id="container">
          <div></div>
          <div></div>
          <div></div>
</div>