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

Question

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

我已经显示了图像，table row但我无法获取该文本（在blog.com下方显示的IN）。

如何在图像上写字？

任何帮助表示赞赏。

---

编辑

我试过了

.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;
}

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

Answer 2

使用图像作为背景图像并将文本放在同一元素中：

HTML：

<table>
 <tr>
  <td id="myTableCell">
   In
  </td>
 </tr>
</table>

CSS：

.myTableCell {
  background-image: url(Images/MyImage.png);
}

Answer 3

@Ecnalyr 是对的，但如果您使用position:absolute，则位置是从浏览器的左上角开始计算的。我真的怀疑这就是你想要的。相反，使用position:relative+ve 和 -ve 数字使用和定位文本，以相对于放置 div 的位置将文本定位在图像上

Answer 4

您可以使用background-image css 将图像作为此表格单元格的背景，并在该单元格中写入文本。

Answer 5

如果图像的包含元素具有位置：相对应用，那么您可以添加一个绝对定位在图像顶部的附加元素