CSS - 在图像开始时创建一个圆圈

Question

我在为图像(动态)制作订单号时遇到了一些麻烦。

我现在有这个:

图像的宽度为 120px，橙色圆圈与边距一起放置在单独的 div 中。

<div>
   <img src="../IMG_PATH/{{$local[$i]['image']}}" 
        width="120" class="img_doctor">
</div>
<div class="order">
   {{ intval($i+1)  }}
</div>

这是我的类(class)订单:

.order {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    line-height: 26px;
    text-align: center;
    background: #FF8242;
    color: white;
    position: absolute;
    margin: -159px 8px;
    font-size: 12px;
    font-weight: bold;
    font-family: Roboto-Regular;
}

所以，我只需要在图像之前制作圆圈并将其放在 Angular 落里，就像这样:

Answer 1

使图像成为<div>并将数字作为 child :

document.getElementById("changeheight").onkeyup = function(e) {
  document.getElementsByClassName('image')[0].style.height = this.value + 'px';
}

document.getElementById("changewidth").onkeyup = function(e) {
  document.getElementsByClassName('image')[0].style.width = this.value + 'px';
}

.image {
  background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
  width: 100px;
  height: 40px;
  border-radius: 5px;
}
.image > span {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: orange;
  color: white;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="image">
  <span>1</span>
</div>

<span>Set height to: </span>
<input id="changeheight"><br/>

<span>Set width to: </span>
<input id="changewidth">

忽略 JavaScript 和 setheight/setwidth 的东西。我猜你会自己填充它，所以这只是 css。