在图像背景上显示文字 [英] Show text on image background

问题描述

我想为我的项目做一些新的事情。我有一个图标，让我说那种像邮件图标。

I am trying to do something new for my project. I have an icon, lets say kind of like Mail icon.

加载网页时，图标也会呈现。基于在页面加载期间在后台执行的查询计数，我想在图标内部/上显示该数字（计数）。种类似我如何看到Facebook通知显示在图标或Gmail显示在图标上有2个新的电子邮件等。

When a page is loaded, the icon also gets rendered. Based on a query count I do in the background during page load, I would like to display that number (count) inside/on the icon. Kind of like how I see Facebook notifications displayed on top of the icon or Gmail shows there is 2 new emails on the icon, etc.

最初，我在想一个不同的图标为每个数字，因为我有有限的最大数量。

Initially, I was thinking of having a different icon for each number, since I had finite max limit for the count. But I am considering other options that are better to do programmatically.

推荐答案

我建议使图标图像成为div的背景那么你可以把它上面的数字作为纯文本，使用填充移动它。

I would recommend making the icon image the background of a div or so, then you can place the number on top of it as plain text, moving it around using padding.

这篇关于在图像背景上显示文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！