用HTML在图像上写入文本
用HTML在图像上写入文本
提问于 2012-07-05 06:41:12
我是新的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>但我只得到文字和背景颜色，但没有背景图像。
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-07-05 06:46:59
例如：
您可以使用它作为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;
}这将直接将文本放在图像上。
Stack Overflow用户
发布于 2012-07-05 06:44:23
使用图像作为背景图像，并将文本放在相同的元素中：
HTML：
<table>
<tr>
<td id="myTableCell">
In
</td>
</tr>
</table>CSS：
.myTableCell {
background-image: url(Images/MyImage.png);
}Stack Overflow用户
发布于 2013-09-27 13:18:58
@Ecnalyr是正确的，但如果使用position:absolute，则从浏览器的左上角计算位置。我真的怀疑这是你想要的。相反，使用position:relative并使用+ve和-ve数字定位文本，以便将文本相对于放置div的位置放在图像上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11339006
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号