在图像顶部添加数字标签答案

【问题标题】：Adding number label on top of an image在图像顶部添加数字标签
【发布时间】：2016-03-30 16:19:45
【问题描述】：

编辑

我已使用 this fiddle 将此 CSS 添加到 span.label

span.label{

        width:100px; color:#FFFFFF; 
        background-color:#F43B05; 
        float:right; padding:3px; 
        position:absolute; top:50px; left:5px;
}

我有这个：

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

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

这是它的代码：

<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>

但这不是我想要的。我想要的是在图像顶部而不是在它的侧面添加这个数字4绿色标签。

我试过了：

<span class="label label-danger">4
<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>

我有这个：

【问题讨论】：

我编辑了我的问题，你可以看看我尝试了什么
您可以将 span 放在相对定位的 div 中，然后将 span 绝对定位。你也可以用 css 来做，使用 :after 和数字“4”作为内容。
好的，现在在我的问题顶部查看我的编辑

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

/* CSS used here will be applied after bootstrap.css */
.badge-notify{
   background-color:red !important;
   position:relative;
   top: -20px;
   left: -35px;
  }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
    <span class="glyphicon glyphicon-comment"></span>
  </button>
  <span class="badge badge-notify">3</span>
</div>

【讨论】：

【解决方案2】：

只需将float:left 用于span.label，然后设置边距即可设置标签元素的位置。

【讨论】：

CSS: span.label { display:block;向左飘浮; margin-bottom: //这里输入你的像素值 margin-left: //这里输入你的像素值 }

【解决方案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;
}

【讨论】：

【解决方案4】：

我在这里做了两个例子，就像我在 cmets 中建议的那样。

JSFiddle

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

【讨论】：