在图像中定位图像

Question

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

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

图标的位置应该是这样的：

我在想 div container/wrapper 包含用户配置文件图像，以及一些带有类图标的子 div最好的方法是什么？

到目前为止我有什么（不是很有用，因为我只是使用 html 将图标放在用户图片下方）

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

目前看起来像这样，也许会添加负值的 margin-left？

谢谢

Answer 1

尝试将用户图标图像设置为 'relative'，然后将旗帜图标设置为 'absolute'。

然后使用“上、左、右、下”属性设置旗帜图标位置。

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>

在图像中定位图像

Positioning images inside of images

html

css

positioning