gpt4 book ai didi

html - 如何在没有绝对定位或将图像设置为背景的情况下将文本放在图像上

转载 作者:技术小花猫 更新时间:2023-10-29 12:28:20 26 4
gpt4 key购买 nike

我正在尝试看看是否可以在不使用 position: absolute 或让图像成为元素背景的情况下将一些文本放在图像上。
限制的原因是 HTML 代码要进入电子邮件,事实证明 hotmail 两者都不支持。
我记得当我第一次开始学习 CSS 时,我经常在图像周围摆弄 float 文本,结果我常常以文本愉快地遍布图像而告终。遗憾的是,我无法重现该行为。

全文(编辑于):
我从图形设计师那里收到了精美的布局。它基本上是一个漂亮的背景图片,带有链接到网站的 Logo ,中间基本上是一个“文本到这里”的区域。
像往常一样,在这些情况下,我使用表格来确保所有内容都保持原样并且可以在 crossbrowser+crossmailclient 上正常工作。
出现问题的原因是中间的“text goes here”区域不是白色矩形,而是有一些背景图形。
做了一些测试后,似乎 Live Hotmail 似乎不喜欢这两个position:absolute或背景图像;相对边距也不好,因为它们会破坏布局的其余部分。

当前版本,适用于任何其他邮件客户端/网站:

...
<td>
<img src='myimage.jpg' width='600' height='400' alt=''>
<p style="position: absolute; top: 120px; width: 500px; padding-left: 30px;">
blablabla<br>
yadda yadda<br>
</p>
</td>
...

当然,“这不可能”可能是一个完全可以接受的答案,但我希望不是 ;)

最佳答案

我过去常常一来 table 就做这样的特技表演。真的很难看,并且可能会让你运行它的任何验证器感到非常尴尬:重叠的表格单元格。即使没有 css,也适用于大多数浏览器。

例子:

<table>  
<tr>
<td></td>
<td rowspan=2><img src="//i.stack.imgur.com/XlOi4.png"></td>
</tr>
<tr>
<td colspan=2>This is the overlay text</td>
</tr>
</table>

我知道,我应该为此投反对票。

关于html - 如何在没有绝对定位或将图像设置为背景的情况下将文本放在图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1829541/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com