html - 使用 HTML 在图像上写入文本

Question

我是 HTML 的新手，想要显示左侧所示的图像。

我显示的图像是 table row 但我无法获取该文本(IN 如下所示 blog.com).

如何在图片上写字？

感谢任何帮助。

---

编辑

我试过了

.logoBg
{
    background-image: url('images/logo01.gif');
    background-color: #72c2dd;
}

和

<tr class="logoBg">
    <td colspan=5>IN
    </td>
    </tr>

但我只得到文本和背景颜色，但没有背景图像。

Answer 1

举个例子:

您可以将其用作您的 HTML:

<tr>
<div class="image">
  <img alt="" src="http://www.YourDomain.com/img/yourImage.jpg" />
  <div class="text">
    <p>This is some demonstration text</p>
    <p>This is some more wonderful text</p>
  </div>
</div>
</tr>

然后这是你的 CSS:

.image {
    position:relative;
}
.image .text {
    position:absolute;
    top:10px;
    left:10px;
    width:300px;
}

这会将文本直接放在图像上。