如何在没有绝对定位的图像上放置文本或将图像设置为backbround [英] How to put text over an image without absolute positioning or setting the image as backbround

问题描述

我试图看看是否可以在图像上放置一些文本，而不使用position：absolute或将图像作为元素的背景。

约束的原因是HTML代码将进入电子邮件，结果是hotmail不支持。

我记得当我第一次开始学习CSS时，围绕图像使用浮动文本进行操作我经常结束与文本快乐地去所有的图像。很遗憾，我无法重现这种行为。

I'm trying to see if it is possible to put some text over an image without using position: absolute or having the image being, the background of an element.
The reason for the constraints is that the HTML code is going into an e-mail, and it turns out that hotmail supports neither.
I remember that when I first began studying CSS, fiddling around with float-ing text around images I often ended up with the text merrily going all over the image. Sadly, I can't reproduce that behavior.

完整故事（编辑）：

我从图形设计师那里得到了一个花哨的布局。它基本上是一个很好的背景图片，标志链接到网站，基本上是一个文本在这里中间的区域。

像往常一样，在这些情况下，我使用表，以确保一切停留在原地并且工作crossbrowser +交叉客户端。

问题产生于这样的事实，中间文本在这里区域不是一个白色矩形，但有一些背景图形。

做了一些测试，看来Live Hotmail似乎不喜欢两个位置：绝对或背景图像;

Full story (edited in):
I received a fancy layout from the graphics designer. It's basically a nice background picture, with logos linking to websites and what basically is a "text goes here" area in the middle.
As usual in these cases, I'm using tables to make sure that everything stays in place AND works crossbrowser+crossmailclient.
The problem arises from the fact that the middle "text goes here" area is not a white rectangle, but has a some background graphics.
Having made some test, it appears that Live Hotmail does not seem to like neither position: absolute or background-image; relative margins are also not good because they'd ruin the rest of the layout.

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

Current version, works in any other mail client/website:

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

当然，这不可能可能是一个完全可以接受的答案，但我希望不会;）

Of course, "it's not possible" could be a perfectly acceptable answer, but I hope not ;)

推荐答案

我曾经一直在这种特技表演。真的很丑陋，可能会严重尴尬任何验证器，你运行它通过：重叠表细胞。

I used to pull stunts like this all the time as soon as tables came. Really ugly, and may seriously embarass any validator you run it trough: overlapping table cells. Works in most browsers though and even without 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>

我知道，这。

这篇关于如何在没有绝对定位的图像上放置文本或将图像设置为backbround的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！