html - 在背景图片的右上角叠加文字

Question

我想知道如何实现我们在链接中看到的通知计数(如下图所示)

我尝试过实现类似的解决方案，使用具有背景图像的 Span，然后使用标签。

大致上，

<span class="message-icon" title="Unread Message" style="display: inline-block"></span><span style="background-color: red"><sup><b>5</b></sup></span>

这与 linkedin 网站上的内容相去甚远。

是否有现成的解决方案？或者有什么想法可以实现吗？

Answer 1

看看这个:http://jsfiddle.net/D3VVv/1/来自这篇文章:How can i overlay an 10x10px image on top of another image?

如果您使包含消息图标的 div 与消息图标 + 通知图标一样大，那么您可以使用 absolute 定位将通知图标定位在该 div 的右上角。如 fiddle 所示。