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

Question

我有一个<td>动态高度但固定宽度的 HTML 电子邮件。

如何在 Outlook 2007、2010、2013 和 Gmail 中也可以向此单元格添加（垂直）重复背景图像？

该单元格中没有任何内容，因为它“只是”用于视觉目的。但它在我的内容单元格旁边，因此需要在高度上是动态的。

score 5 · Accepted Answer

2013 年 8 月更新：我怀疑这对约翰仍然有用。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>

就在文本框结束之前，我已经在之前评论中提到的 Microsoft Office TechCenter 线程中对此进行了解释。

我原来的答案：

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

我很确定您无法获得背景图像来实际填充表格单元格或其他未定义高度的区域。但是，您可以在表格周围使用 [VML 文本框][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>
我尝试了一些解决方案：

将空行的字体大小/行高设置为 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

score 0 · Accepted Answer

When doing HTML email, you should be aware of the differences among the various clients.

This guide can help. For example, in Outlook 2007/2010, background-repeat is not supported. Oddly, it was supported in version 2003.

score 0 · Accepted Answer

似乎没有办法在 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

score 0 · Accepted Answer

我很久以前就不再使用 Outlook 了，但这似乎至少在 gmail 中起到了作用：

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

提示是使用（不推荐使用的）background属性来放置图像而不是在style属性内，您可以在其中设置repeat-y属性（另请注意，我使用的是属性width而不是将其添加为属性内的 cssstyle属性......但是正如您所提到的，只有在您构建 html 电子邮件之前，您才知道我们在说什么；）

检查这个小提琴的演示

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

score -2 · Accepted Answer

大声笑，愚蠢的开发人员。在大多数主要的电子邮件客户端中，只需创建一个复杂的表格，就可以轻松实现没有内容的垂直重复背景。

例如，在 John 的情况下，他可以轻松地在他的主要内容“td”旁边创建“td width="1" bgcolor="#XXXXXX" /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>

另外，这是事后的想法，但我曾将这种语言用于 Outlook，称为 VML。它非常适合背景，但它不会做重复的东西。您可以在这里查看一个很好的介绍：http: //blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/

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

5 回答 5

Related

Reference