在背景图像的右上角覆盖文本答案

【问题标题】：Overlaying text on the upper right corner of a background image在背景图像的右上角覆盖文本
【发布时间】：2013-03-08 22:05:56
【问题描述】：

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

我尝试过实现类似的解决方案，使用具有背景图像的 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网站上的内容相去甚远。

是否已经有成熟的解决方案可用？或任何想法如何实现？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

我想在图片上叠加文字。不是图像上的图像。
请忽略我上面的 cmets 并感谢您提供的示例。我让它使用它。谢谢。

【解决方案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; }

【讨论】：

好吧，猫很好，但那个例子和我提到的问题完全一样，也许我们应该把这个问题作为重复提交......
@saratis，对不起，伙计，直到我发帖才看到你的帖子。