Question

我在制作图像订单号时遇到了麻烦（动态）。

我现在有这个：

enter image description here

图片有width 120px，橙色圆圈的边距放在一个单独的div中。

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

这是我的班级order：

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

所以，我只需要在图像前制作圆圈并放在角落，如下所示：

enter image description here

Answer 1

将图片设为<div>并将该号码作为孩子：

＆＃13;

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

＆＃13;

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

＆＃13;

<div class="image">
  <span>1</span>
</div>

<span>Set height to: </span>
<input id="changeheight"><br/>

<span>Set width to: </span>
<input id="changewidth">

＆＃13;

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

Answer 2

试试这个：

<html>
<head>

  <style type="text/css">
  .order-wrapper {
    position: relative;
  }
    .order {
        width: 27px;
        height: 27px;
        border-radius: 50%;
        line-height: 26px;
        text-align: center;
        background: #FF8242;
        color: #fff;
        top: 10px;
        left: 10px;
        position: absolute;
        font-size: 12px;
        font-weight: bold;
        font-family: Roboto-Regular;
    }
  </style>

</head>

<body>


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

</body>
</html>

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

2 个答案: