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

Question

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

如何向此单元格添加(垂直)重复背景图像，使其在 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 .

我原来的回答:

I've been able to almost crack this, but not quite. So I'm posting this here in hopes that someone can build on it and post a fully working solution.

I'm pretty sure you can't get a background image to actually fill a table cell or other area of undefined height. However, you can use a [VML TextBox][1] and [VML Fill Element][2] around a table, with a background image and fallback color defined, which can stretch to the height of the content.

Inside this textbox, you can then place a two-column table, where one has a transparent background and the other has a solid background color, to emulate the layout you described.

Around the textbox, wrap another table with the same background image and fallback color, for non-Outlook email clients.

Now, this all works well, but the problem I'm having is that the Outlook/Word rendering engine insists on adding a blank line below the table inside the textbox. So while Outlook will repeat the background image along the side of the content, it will also add a row of the background image at the full width of the outer table.

Test the following in Outlook 2007+ to see what I have so far:

<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"><span style="font-size: 0px;">
        <![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]>
        </span></v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
  </table>

A few solutions I tried:

• Set the font-size/line-height of the blank line to 0 (I did this in the example code above, but it renders as 1px instead of 0)
• Use a different element instead of a table, to avoid the blank line.
  • <p>: Can't be set to a fixed width.
  • <div>: Can't have a background color.
  • <span>: Can't be rendered as a block level element.

Hopefully someone can share a solution to this remaining issue. John B., if you can post the actual code or layout that you're coding, and also the background image, that will also help determine which hacks might work and which restrictions must be taken into account.

If, for instance, the background image is a 1px high repeating image, you could use a row of 1px wide table cells with different background colors, in place of an actual image.

[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