如何将文本放在img html上

Question

我想在img标签html上放置动态文本，如下所示（手动编辑）

！[在此处输入图片说明] [1]

如下图所示。我试图添加文字，但它会在图像旁边。请帮助我怎么做。

我的代码：

  <div style="float: left; display: inline-block; background: url('images/titlebar.png'); width: 287px; height: 32px">
My Profile
 </div>

使用Moorthy编辑后的额外空间：

！[在此输入图片说明] [2]

Answer 1

<img src="" style="position: relative;"><span style="position: absolute; top: 5px; right: 5px;">My profile</span></img>

你可以尝试这个 - 设置位置：父亲和位置的相对位置：文本的绝对位置

Answer 2

在css中使用背景属性，例如：background: url('images/titlebar.png');

<div style="float: left; display: inline-block; background: url('images/titlebar.png') no-repeat; width: 287px; height: 32px">
    My Profile
</div>

Answer 3

您需要设置相对于图像的位置，并将绝对位置设置为文本。更多细节可以在这里找到：http://css-tricks.com/text-blocks-over-image/