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/ 来自这篇文章：如何将 10x10px 图像叠加在另一个图像之上？

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

Answer 2

有几种方式，这里以绝对定位为例：

http://jsfiddle.net/e2Zs4/

HTML

<div class="con">

<img src="http://www.pictures-of-kittens-and-cats.com/images/cute-kitten-pictures-002-small.jpg" />

<img class ="number" src="http://www.privatefly.com/export/PrivateFly/.content/images/services/red_numbers_4.gif " />

</div>

CSS

.con { width:100px; height:100px; position:relative; }
.number { position:absolute; top:10px; right:10px; }