Question

我的HTML电子邮件的动态高度为<td>，但宽度固定。

如何将（垂直）重复背景图像添加到适用于Outlook 2007,2010,2013和Gmail的此单元格中？

单元格中没有任何内容，因为它仅仅是出于视觉目的。但它紧挨着我的内容单元格，因此需要高度动态。

Answer 1

2013年8月更新：我怀疑这对John仍然有用。 B，但我只想对可能遇到此问题的人进行快速更新。

我能够解决之前描述的问题，并停止在纯色背景下面窥视背景图像。

这是更新后的代码：

<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200">
    <tr>
        <td>
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;">
            <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" />
            <v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0">
          <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="100"></td>
                        <td bgcolor="#ffffff" width="100">
                        The<br/>
                        background<br/>
                        image<br/>
                        on<br/>
                        the<br/>
                        left<br/>
                        will<br/>
                        stretch<br/>
                        to<br/>
                        the<br/>
                        height<br/>
                        of<br/>
                        this<br/>
                        content.
                        </td>
                    </tr>
                </table>
          <!--[if gte mso 9]>
              <p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>
            </v:textbox>
          </v:rect>
          <![endif]-->
        </td>
    </tr>
</table>

此处的修复是

行

<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p>

在文本框结束之前，我已经解释了这个in the Microsoft Office TechCenter thread I referred to in a previous comment。

我原来的回答：

我已经能够几乎破解这个，但并不完全。所以我在这里发帖，希望有人可以在此基础上发布并发布一个完全可行的解决方案。

我很确定你无法获得背景图像来实际填充表格单元格或其他未定义高度的区域。但是，您可以使用[VML TextBox] [1]和[VML填充元素] [2] 围绕表格，并定义背景图像和后备颜色，可以拉伸到高度内容。

在此文本框中，您可以放置一个双列表，其中一个具有透明背景，另一个具有纯色背景，以模拟您描述的布局。

在文本框周围，为非Outlook电子邮件客户端包装具有相同背景图像和后备颜色的另一个表。

现在，这一切都运行良好，但我遇到的问题是Outlook / Word渲染引擎坚持在文本框内的表下方添加一个空行。因此，虽然Outlook将在内容的一侧重复背景图像，但它也会在外部表的整个宽度上添加一行背景图像。

在Outlook 2007+中测试以下内容，看看到目前为止我所拥有的内容：
<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200">
  <tr>
    <td>
      
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="100"></td>
            <td bgcolor="#ffffff" width="100">
              The<br/>
              background<br/>
              image<br/>
              on<br/>
              the<br/>
              left<br/>
              will<br/>
              stretch<br/>
              to<br/>
              the<br/>
              height<br/>
              of<br/>
              this<br/>
              content.
            </td>
          </tr>
        </table>
      
    </td>
  </tr>
  </table>
我尝试了一些解决方案：


将空白行的font-size / line-height设置为0（我在上面的示例代码中执行了此操作，但它呈现为1px而不是0）

使用其他元素而不是表格，以避免出现空白行。

<p>：无法设置为固定宽度。

<div>：无法使用背景颜色。

<span>：无法呈现为块级元素。




希望有人可以分享这个剩余问题的解决方案。 John B. ，如果您可以发布您正在编码的实际代码或布局，以及背景图片，这也将有助于确定哪些黑客可能有效，哪些限制必须考虑在内。

例如，如果背景图像是1px高重复图像，则可以使用一行1px宽的具有不同背景颜色的表格单元格来代替实际图像。

[1]：http://msdn.microsoft.com/en-us/library/bb264073%28v=VS.85%29.aspx     [2]：http://msdn.microsoft.com/en-us/library/bb229596%28v=VS.85%29.aspx

Answer 2

我很久以前就没有使用过Outlook，但这似乎至少在gmail中起作用了：

<td width="200" style="background-repeat: repeat-y;" background="http://the-location.com/backgroundImage.jpg"></td>

提示是使用（已弃用的）background属性放置图像而不是style属性，您可以在其中设置repeat-y属性（另请注意我使用属性width而不是将其作为css属性添加到style属性中...但正如您所提到的，只有在您构建HTML电子邮件之前，您才知道我们在谈论什么;）

Check this fiddle for a DEMO

我在简报中多次这样做过，我还没有收到任何关于向Outlook用户发送测试时邮件看起来不正确的报告。

Answer 3

在做HTML电子邮件时，您应该了解不同客户之间的差异。

This guide可以提供帮助。例如，在Outlook 2007/2010中，不支持background-repeat。奇怪的是，2003版本支持它。

Answer 4

似乎无法在Outlook 2007/2010和2013中实现重复的背景图像。

以下是JFK测试的预览：http://www.emailonacid.com/app/acidtest/viewresult/nWC9hJ5N0BvkZIk4Zvz724rMQm19MUsCJ0shOIFcWgGMh。不幸的是它也不起作用。

CampaignMonitor对不同客户的HTML和CSS支持提供了非常有用的指南：http://www.campaignmonitor.com/css/

如果在Outlook 2007/2010和2013中只需要固定大小的背景图像，VML对象可能会对您有所帮助：https://www.campaignmonitor.com/forums/viewtopic.php?pid=14197

Answer 5

lol，傻傻的开发者。通过简单地创建复杂的表格，可以在大多数主要电子邮件客户端轻松实现没有内容的垂直重复背景。

例如，在约翰的情况下，他可以轻松地创建“td width =”1“bgcolor =”＃XXXXXX“/ td”组合，与他的主要内容“td”相对应，这将保留他的内容。我强烈建议在主要内容td中嵌入一个表格，以便您可以流畅地控制其中的填充和高度。

这种编码风格是在电子邮件领域实现垂直液体布局的最佳方式，我将继续并帮助您入门。缩进有点偏，但这是一个糟糕的代码编辑情况，我的结束表没有出现。不管怎样，你都明白了。

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td width="1" bgcolor="#e4e4e4"></td>
    <td width="1" bgcolor="#e1e1e1"></td>
    <td width="1" bgcolor="#dadada"></td>
    <td width="1" bgcolor="#cfcfcf"></td>
    <td width="1" bgcolor="#c6c6c6"></td>
    <td valign="top" align="center" width="200">
        <!-- Main Content Cell -->
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td valign="top" align="center" height="200">
                    <!-- I can be whatever height and still not break this cell's makeshift background -->
                </td>
            </tr>
        </table>
        <!-- End Main Content Cell -->
    </td>
    <td width="1" bgcolor="#c6c6c6"></td>
    <td width="1" bgcolor="#cfcfcf"></td>
    <td width="1" bgcolor="#dadada"></td>
    <td width="1" bgcolor="#e1e1e1"></td>
    <td width="1" bgcolor="#e4e4e4"></td>
</tr>

此外，这是一个想法，但我使用这种语言称为VML的Outlook。它适用于背景，但它没有重复的东西。您可以在此处查看好的介绍：http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

在Outlook 2007/2010/2013和Gmail中重复背景图像

5 个答案: