定位圖像內部的圖像

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