小编典典

如何在图像上放置文本而没有绝对定位或将图像设置为后退

css

我正在尝试查看是否可以在不使用位置的情况下在图像上放置一些文本:绝对图像或具有元素背景。
限制的原因是HTML代码正在发送到电子邮件中,事实证明hotmail都不支持。
我记得当我刚开始研究CSS时,会在图像周围随意浮动文本,而最终我常常以遍历整个图像的文本为乐。可悲的是,我无法重现这种行为。

全文(编辑):
我从图形设计师那里得到了漂亮的布局。它基本上是一张漂亮的背景图片,带有链接到网站的徽标,中间是基本上“文本在此处”的区域。
在这些情况下,像往常一样,我使用表来确保所有内容都保留在原位并且可以跨浏览器+ crossmailclient运行。
问题来自于以下事实:中间的“文本到达此处”区域不是白色矩形,而是具有一些背景图形。
经过测试,Live Hotmail似乎不喜欢任何位置:绝对图像或背景图像。相对边距也不好,因为它们会破坏其余的布局。

当前版本,可在任何其他邮件客户端/网站中使用:

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

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


阅读 287

收藏
2020-05-16

共1个答案

小编典典

桌子一出,我就一直在拉这种特技。确实很丑陋,并且可能会严重阻碍您运行它的任何验证器:重叠的表单元格。即使在没有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>

我知道,对此我应有的反对意见。

2020-05-16