Html 在图像顶部添加数字标签

编辑

我已经使用

我有这个：

我需要使用引导在图像上添加标签

我有一张带有标签的图片：

下面是它的代码：

<span class="label label-success">4</span>

<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button"/>

<div title="3rd Molar - Upper Rigth Jaw" id="div_one" class="collapse"><?php echo $resTeeth['one'] ?>

</div>

我有这个：

---

只需对

span.label

使用

float:left

，然后设置边距来设置label元素的位置

只需对

span.label

使用

float:left

，然后设置边距来设置label元素的位置

我相信这将是你的答案。 谢谢

此处使用的CSS将在bootstrap.CSS之后应用*/ .徽章通知{ 背景色：红色！重要； 位置：相对位置； 顶部：-20px； 左：-35px； }

3.

我相信这将是您的答案。 谢谢

此处使用的CSS将在bootstrap.CSS之后应用*/ .徽章通知{ 背景色：红色！重要； 位置：相对位置； 顶部：-20px； 左：-35px； }

3.

试试这个：

<div class="container">
   <img src="" />
   <span class="lbl">something</span>
</div>

.container{
position:relative;
}
.container img, .container .lbl{
position:absolute;
top:0px;
left:0px;
}

某物
.集装箱{
位置：相对位置；
}
.container img、.container.lbl{
位置：绝对位置；
顶部：0px；
左：0px；
}

试试这个：

<div class="container">
   <img src="" />
   <span class="lbl">something</span>
</div>

.container{
position:relative;
}
.container img, .container .lbl{
position:absolute;
top:0px;
left:0px;
}

某物
.集装箱{
位置：相对位置；
}
.container img、.container.lbl{
位置：绝对位置；
顶部：0px；
左：0px；
}

我在这里举了两个例子，就像我在评论中建议的那样

---

我在这里举了两个例子，就像我在评论中建议的那样

---

我编辑了我的问题，你可以看到我尝试了什么，你可以把跨度放在相对定位的div中，然后把跨度放在绝对位置。你也可以使用css，使用：after，以数字“4”作为内容。好的，请参见我的问题顶部的“立即编辑”我编辑了我的问题，你可以看到我尝试的内容。你可以将跨度放在相对定位的div中，然后将跨度定位为绝对值。你也可以使用css，使用：after和数字“4”作为内容。好的，在我的问题css:span.label{display:block；float:left；margin bottom://此处键入像素值margin left://此处键入像素值}css:span.label{display:block；float:left；margin bottom://此处键入像素值margin left://此处键入像素值}

<div class="container">
   <img src="" />
   <span class="lbl">something</span>
</div>

.container{
position:relative;
}
.container img, .container .lbl{
position:absolute;
top:0px;
left:0px;
}

div
{
  position: relative;
  width: 300px;
  height: 300px;
}

span
{
  position: absolute;
 background: red;
  color: white;
  height: 60px;
  width: 60px;
  text-align: center;
  font-family: Tahoma, sans-serif;
  font-size: 40px;
  line-height: 55px;
  border-radius: 10px;
  bottom: 0;
  right: 0;
}  

.icon
{
  position: relative;
}

.icon:after
{
  content:"4";
  position: absolute;
  display: block;
  background: red;
  color: white;
  height: 60px;
  width: 60px;
  text-align: center;
  font-family: Tahoma, sans-serif;
  font-size: 40px;
  line-height: 55px;
  border-radius: 10px;
  bottom: 0;
  right: 0;
}