使用相对定位将文本覆盖在图像上
我想将文本放置在图像上。以下是我当前使用的代码:
<td width="10%">
<img src="tempballoon.png" alt="balloon" style="z-index: -1" />
<div style="position:relative;left:30px;top:-75px;font-size: 32px;display: none">
Test
</div>
</td>
我的问题是,尽管文本已正确覆盖,但它在 中消耗的“空间”仍然存在!当我尝试用“margin-top”替换
中的“top”位置时,它也会影响 ![]()
,因此 >![]()
超出
的边界。I want to position a text overlaying an image. Below is my currently used code:
<td width="10%">
<img src="tempballoon.png" alt="balloon" style="z-index: -1" />
<div style="position:relative;left:30px;top:-75px;font-size: 32px;display: none">
Test
</div>
</td>
My problem is, although the text is properly overlayed, the "space" it consumes in the <td>
is still there! When I tried to replace the 'top' position in the <div>
with 'margin-top', it also affects the <img>
and so the <img>
goes past the border of the <td>
.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您希望
位置:绝对
和容器是相对
:You want
position: absolute
and the container to berelative
:为什么不在 TD 内设置一个 div,将图像设置为 div 的背景,然后将文本拖放到 div 中?
Why not set a div inside the TD set the image to the background of the div and the drop your text in the div?