使用Bootstrap对图像进行CSS徽章

Question

我试图在图像上放置"通知"样式徽章.我使用Twitters Bootstrap作为基础框架并创建一个名为的自定义CSS类notify-badge.但我无法正常排队.

通过Photoshop的魔力,这就是我想要实现的目标.

这是我的CSS代码.

.notify-badge{
    position: absolute;
    background: rgba(0,0,255,1);
    height:2rem;
    top:1rem;
    right:1.5rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;;
    font-size: 1rem;
    border-radius: 50%;
    color:white;
    border:1px solid blue;
}

我希望能够在徽章中放置任何小的文字,并展开红色圆圈以适应.

这是我的HTML代码.

<div class="col-sm-4">
 <a href="#">
     <span class="notify-badge">NEW</span>
     <img src="myimage.png"  alt="" width="64" height="64">
 </a> 
    <p>Some text</p>
</div>

编辑:

这是APAD1答案的图像.

添加margin-top:-20px;以.item修复对齐问题.

Answer 1

一堆不同的方法,你可以做到这一点.这应该让你开始:

.item {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:-20px;
    top:10px;
    background:red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
  	<div class="item">
  		<a href="#">
			<span class="notify-badge">NEW</span>
      		<img src="http://placehold.it/200x200"  alt="" />
		</a>
	</div>
</div>

Answer 2

这里的想法是将绝对容器覆盖在相对容器之上。这是一个类似的例子：

<div class="image">
      <img src="images/3754004820_91a5c238a0.jpg" alt="" />
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>

CSS：

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

这会将我们的文本很好地放在图像的顶部，但它并没有实现我们想要在文本后面实现的框。为此，我们不能使用 h2，因为这是一个块级元素，我们需要一个没有特定宽度的内联元素。因此，将 h2 包裹在一个跨度内。

<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

然后使用该跨度来设置样式和文本：

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

有关如何确保适当的间距或使用 jQuery 来清理代码（允许您从代码中删除一些标签并通过 jQuery 将它们放回原处）的想法，请检查源代码。