使用 HTML 在图像上写入文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11339006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Writing text on an image with HTML
提问by GAMA
I'm new to HTML and want to display image shown on left.
我是 HTML 新手，想显示左侧显示的图像。
I have displayed the image which is a table rowbut I'm not able to get that text (INshown below blog.com).
我已经显示了图像，table row但我无法获得该文本（在blog.com下方显示为IN）。
How can I write on the image?
我怎样才能在图像上写字？
Any help appreciated.
任何帮助表示赞赏。
EDIT
编辑
I tried
我试过
.logoBg
{
background-image: url('images/logo01.gif');
background-color: #72c2dd;
}
and
和
<tr class="logoBg">
<td colspan=5>IN
</td>
</tr>
But I'm only getting text and background color, but NObackground image.
但我只得到文本和背景颜色，但没有背景图像。
回答by Ecnalyr
As an example:
举个例子：
You could use this as your HTML:
您可以将其用作 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>
then this as your CSS:
那么这就是你的 CSS：
.image {
position:relative;
}
.image .text {
position:absolute;
top:10px;
left:10px;
width:300px;
}
This will place text directly on an image.
这会将文本直接放置在图像上。
回答by Bazzz
Use the image as a background-image and put the text in the same element:
使用图像作为背景图像并将文本放在同一元素中：
HTML:
HTML：
<table>
<tr>
<td id="myTableCell">
In
</td>
</tr>
</table>
CSS:
CSS：
.myTableCell {
background-image: url(Images/MyImage.png);
}
回答by user188755
@Ecnalyr is right, but if you use position:absolute, the position is calculated from the top left corner of your browser. I really doubt that's what you want. Rather, use position:relativeand position your text using +ve and -ve numbers to position your text on the image relative to wherever you place the div
@Ecnalyr 是对的，但如果您使用position:absolute，则位置将从浏览器的左上角开始计算。我真的怀疑这就是你想要的。相反，使用position:relative+ve 和 -ve 数字使用和定位您的文本，以相对于您放置 div 的任何位置在图像上定位您的文本
回答by OJay
If the containing element of the image has position: relative applied, then you can add an additional element that is positioned absolutely on top of the image
如果图像的包含元素具有 position:relative 应用，那么您可以添加一个绝对位于图像顶部的附加元素
回答by Chris Li
You can use background-imagecss to make the image as a background of this table cell, and write text in that cell.
您可以使用background-imagecss 将图像作为此表格单元格的背景，并在该单元格中写入文本。
