html - 图像上的 CSS 通知样式徽章

Question

我正在尝试在图像上放置一个“通知”样式的徽章。我使用 Twitters Bootstrap 作为基础框架并创建了一个名为 notify-badge 的自定义 CSS 类。但是我无法正确排列任何东西。

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

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="https://picsum.photos/200"  alt="" />
        </a>
    </div>
</div>

附录(来自提问者@user-44651)

(从问题中移出)

这是应用此答案的结果。

将 margin-top:-20px; 添加到 .item 修复了对齐问题。