图像上的 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>

原文由 user-44651 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

附录（来自 Asker @user-44651）

（从问题中移出）

这是应用此答案的结果。

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

原文由 APAD1 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 来稍微清理代码的想法，请查看 源代码。

原文由 noctrnal 发布，翻译遵循 CC BY-SA 3.0 许可协议