Question

我试图让一些文字很好地漂浮在一些图像上。问题是，我觉得我正在做的事情是太多的工作/混乱，并且它没有正确格式化。

寻求帮助，使这种布局更顺畅，更简单。我也需要能够引用每个部分的第一个数字，以便我可以通过AngularJS点击更新。

我想要的是文字显示如下

enter image description here

这是我到目前为止所尝试的内容： PLUNKER DEMO

同样，我试图找到一种方法，将这个文本放在所有图标上，就像上面的例子一样，并且能够达到事件的第一个数字。

＆＃34;结束外观＆＃34;如下所示，我只需要帮助格式化第一行，以便我可以看到如何为其余行完成。

enter image description here

原始代码： PLUNKER DEMO

HTML

  <div ng-controller="ImagesCtrl">
  <span class="section" style="background:rgba(178, 0, 0, 0.7)">
    <img id="offense1-0" src={{pictures[0]}}>
    <img id="offense1-1" src={{pictures[1]}}>
    <img id="offense1-2" src={{pictures[2]}}>
    <img id="offense1-3" src={{pictures[3]}}>
    </span>
    <span class="section" style="background:rgba(30, 154, 225, 0.7)">
    <img id="offense1-4" src={{pictures[4]}}>
    <img id="offense1-5" src={{pictures[5]}}>
    <img id="offense1-6" src={{pictures[6]}}>
    <img id="offense1-7" src={{pictures[7]}}>
    </span>
    <span class="section" style="background:rgba(30, 154, 54, 0.7)">
    <img id="offense1-8" src={{pictures[8]}}>
    <img id="offense1-9" src={{pictures[9]}}>
    <img id="offense1-10" src={{pictures[10]}}>
    <img id="offense1-11" src={{pictures[11]}}>
    </span>
    <div class="number"><span id="1-0">0</span>/3</div>
    <div class="number"><span id="1-1">0</span>/3</div>
    <div class="number"><span id="1-2">0</span>/3</div>
    <div class="number"><span id="1-3">0</span>/3</div>

    <div class="number"><span id="1-4">0</span>/3</div>
    <div class="number"><span id="1-5">0</span>/3</div>
    <div class="number"><span id="1-6">0</span>/3</div>
    <div class="number"><span id="1-7">0</span>/3</div>

    <div class="number"><span id="1-8">0</span>/3</div>
    <div class="number"><span id="1-9">0</span>/3</div>
    <div class="number"><span id="1-10">0</span>/3</div>
    <div class="number"><span id="1-11">0</span>/3</div>
  </div>

CSS

div {
  background:black;
  height:500px;
}

.section {
  text-align:center;
  padding:0px 15px 0px 15px;
  height: 100%; 
  display: inline-block;
}

img {
  margin-left:3px;
  margin-top:3px;
      -webkit-box-shadow: 0px 0px 7px #7FFF00;
    -moz-box-shadow: 0px 0px 7px #7FFF00;
    box-shadow: 0px 0px 7px #7FFF00;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;  
    border-radius: 8px;
}

.number {
  color:yellow;
  margin:0px;
  padding:0px;
  padding-right:30px;
  background:transparent;
}

Answer 1

尝试考虑你的HTML。这将是我想要的选择：

 <div>
     <img id="offense1-0" src="" alt="pic">
     <span>1/1</span>
 </div>

使用css：

div{
  position: relative;
  float: left;
  padding:0px 15px 0px 15px;
}

div span{
  position: absolute;
  left: 25%;
  width: 50%;
  margin: -15px auto 0 auto;
  background: black;
  color: white;
  text-align: center;
}

检查结果：http://jsfiddle.net/tralala/mj51kx42/1/

Answer 2

只需将图片放入跨度并添加＆＃34; x / y＆＃34;在span中的文本..然后你可以将它们绝对放在里面，用一些简单的css规则将它们全部放在正确的位置。

  <span class="img">
    <img id="offense1-0" src={{pictures[0]}}>
    <span>0/3</span>
  </span>
  <span class="img">
    <img id="offense1-1" src={{pictures[1]}}>
    <span>1/3</span>
  </span>
  <span class="img">
    <img id="offense1-2" src={{pictures[2]}}>
    <span>2/3</span>
  </span>
  <span class="img">
    <img id="offense1-3" src={{pictures[3]}}>
    <span>2/3</span>
  </span>

我把你的傻瓜分叉并简化了一下：http://plnkr.co/edit/oKUcipF1VXo8MZEPAt7g

Answer 3

如果您不想更改HTML代码，请将代码与以下内容合并

注意：数字类中的span id无效。 ID不能以数字开头（查看此链接以获取更多信息：What are valid values for the id attribute in HTML?）

如果你看下面的代码，我已经添加了＆＃34; num＆＃34;在您的号码ID之前。这会将ID格式从id="0-1"更改为id="num0-1"。然后我删除＆＃34; num＆＃34;从jquery中的id找到相关的图像。

jsfiddle

<强> HTML

<div id="container">
    <img id="iconImg0-1" class="iconImg" src="http://upload.wikimedia.org/wikipedia/commons/0/0e/App-icon.png">
    <img id="iconImg0-2" class="iconImg" src="https://www.bellbanks.com/wp-content/uploads/2013/02/mobile-app-icon.jpg">
    <div id="num0-1" class="iconNumber">0/3</div>
    <div id="num0-2" class="iconNumber">2/3</div>
</div>

<强> CSS

#container {
    width:200px;
    height:100px;
}
.iconImg {
    height:50px;
    width:50px;
    position:relative;
}
.iconNumber {
    position:absolute;
    background-color:rgba(180, 180, 180, 0.7);
    text-align:center;
}

<强> JS

var numIconNumber = $(".iconNumber").length;
for (var i = 0; i <= numIconNumber; i++) {
    var myId = $(".iconNumber:eq(" + i + ")").attr("id");
    var myIdNum = myId.replace("num", "");
    var myImg = $("#iconImg" + myIdNum);
    var myNum = $("#" + myId);
    myNum.css({
        width: myImg.width() + "px",
        left: myImg.offset().left + "px",
        top: (myImg.offset().top + myImg.height()) - myNum.height() / 2 + "px"
    });
}

CSS文本格式

3 个答案: