定位图像内部的图像

Question

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

的理解，我有以下Spritesheet：

图标的位置应是这样的：

我想包含一个div容器/包装的用户配置文件图像和一些图标类的细分，是实现它的最佳方式？

我有什么至今（不是真的有用，因为我刚放置的userpic使用HTML下方的图标）

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

目前看起来是这样的

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

，也许增加一个与容限留下负值？

谢谢

Answer 1

的这里的关键是在CSS背景位置，而且，我建议你带上透明胶片t png，以便在将圆形标志叠加在圆角矩形上时不会出现白色背景。

#container{ 
 
\t background: url(http://i.stack.imgur.com/Ez7w1.png); 
 
\t width: 134px; 
 
\t height: 135px; 
 
\t background-position-x: -150px; 
 
} 
 
#container div { 
 
\t 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){ 
 
\t background-position: -100px 0px; 
 
} 
 
#container div:nth-child(2){ 
 
\t /*no positioning needed in this example*/ 
 
} 
 
#container div:nth-child(3){ 
 
\t background-position: 0px -32px; 
 
}

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

Answer 2

尝试用户图标图像设置为“相对”，则标志图标，“绝对”。

然后设置与“顶部的标志图标位置，左，右，下”属性。

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