图像上的 CSS 通知样式徽章

Question

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

通过 Photoshop 的魔力，这就是我想要完成的任务。 [![在此处输入图片描述][1]][1]

这是我的 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 修复了对齐问题。

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 包裹在 span 中。

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

Answer 3

这是我用示例代码制作的小提琴：

https://jsfiddle.net/un2p8gow/

• 我将 notify-badge 跨度更改为 div。我看不出它必须是跨度的理由。

• 我将位置更改为相对位置。编辑 - 你实际上可以保留属性 position: absolute; 只要你知道你在做什么。 cmets中的人是对的。

• 您有属性right: 1.5rem;，我只是将其更改为left，因为它的插入方向与您的示例相反。

你可以进一步调整它，但这是你想要的。