画像内に画像を配置する

Question

現在、私はフラグのアイコンをユーザーのプロフィール画像と組み合わせようとしています。あなたの理解のために

、私は次のようSpritesheetがあります

アイコンは次のように配置する必要があります：私は含むのdivコンテナ/ラッパーを考えています

ユーザプロファイル画像、およびアイコンのクラスを含むいくつかのサブディビジョンは、それを行う最良の方法ですか？現在、多分margin-を追加し、このようになります。私は今のところ（実際に有用ではない、私はちょうど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

ここの鍵は、CSSのバックグラウンドポジションにあります。そして、あなたは、トランスペアレン丸められた四角形の上にフラグを重ね合わせたときに白い背景が得られないようにします。

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