在图像上放置大量文本

Question

我有一个问题，已经在 SO 上解决了，它是关于在图像上放置文本，现在我拥有的文本不止几行。

是这样的：

<h1>Hellow</h1>
<p>Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum</p>

以上必须检查图像。

此问题已解决 on this thread。现在我在线程中尝试了所有可能的解决方案，但对我没有任何帮助。

gufa提供的解决方案，这是我尝试过的，zano提供的，但不是我想要的解决方案。

我需要为电子邮件而不是网页执行此操作。这是最大的问题。

我尝试了以下方法：

  <tr>
      <td valign="top" class="headerContent">
            <div style="position:relative;" >
                  <img src="http://i.imgur.com/FzuJB5L.jpg" style="max-width:600px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
                                   <div style="position:absolute;top:30px;left:50px;right:50px;text-align:center;">
                                    <h1 style="display:inline-block;">Header</h1>
                                        <p style="font-size:13px;text-align:justify;">
                                                    We are a company based startup providing a unique service for washing .At lorium we implement innovative services for both owners &amp; lorium that are hassle free &amp; also saves time and money. lorium is proud to bring a change in people’s lives by delivering them peace of mind in the lorium domain. <br><br>
                                                    We aim to provide assured lorium returns to owners of lorium! 

                                    </p>    
                                  </div>
                                </div>
                              </td>
                           </tr>

这真的一点用都没有。这个问题有什么简单的解决办法吗？

编辑

浮动和相对定位的解决方案确实有效，但不幸的是，position:relative 不会从流中取出一个元素，这是您想要的，而浮动并不是我真正想要的。

Answer 1

这真的很奇怪。 为什么不直接将图像设置为背景，那么这将不是问题。

并且远离定位和浮动。

使用http://backgrounds.cm/ 来帮助客户支持，尤其是 Outlook。