在图像顶部添加数字标签

Question

修改

我已使用this fiddle

将此css添加到span.label

span.label{

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

我得到了这个：

我需要使用bootstrap在图像上添加标签。

我的图像带有标签：

以下是代码：

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

我得到了这个：

Answer 1

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

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 4

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

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