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

标签 html css css-float css-position hotmail

我正在尝试看看是否可以在不使用 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/

相关文章:

html - <窗体>是否中断高度 :100%?

javascript - 如何禁用 CKEditor 对话框皮肤?

css - SVG 掩码在 Mozilla 中不起作用

html - 如何在底部显示粘性回复表单?

javascript - dojo 的 event.preventDefault() 不适用于 <a> 标签

javascript - 为多个实例使用复选框

html - 在 Internet Explorer 中将子项与内联父项的顶部对齐

html - 将带有 float 子元素的 div 扩展到它们的全高

css - 如何制作以中间为中心的可调整大小的菜单?

html - 如何填充对象内的高度