table 个单元格中的 Mailchimp 背景图像

Question

我正在尝试创建一个 mailchimp 模板，但 table 个单元格中的背景图片存在兼容性问题。

像这样的东西，只是被 Outlook 等忽略：

<td align="center" background="image-url.jpg" style="background-size: cover; background-position: center;">

我正在做这样的事情：

<table class="wrapper" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" background="image-url.jpg" style="background-size: cover; background-position: center;">
            <div>
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                <v:fill type="tile" src="image-url.jpg" color="#7bceeb" />
                <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                <![endif]-->
                <table width="600" border="0" cellpadding="0" cellspacing="0">
                    <tr><td>Information etc</td></tr>
                </table>
                <!--[if gte mso 9]>
                </v:textbox>
                </v:rect>
                <![endif]-->
            </div>
        </td>
    </tr>
</table>

我遇到的问题是图像是平铺的。有没有办法让它匹配

style="background-size: cover; background-position: center;"

造型？此外，出于某种原因，它将嵌套的 table 推到左侧而不是中间。我认为可能是 div 造成的。

最后，这是最好的选择还是有更可靠的方法来处理 table 单元格中的背景图像？

谢谢。

Answer 1

请试试这个

  <style>
    background {
      background-image: url('image-url.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }
    </style>

Answer 2

Windows 上的 Outlook 不支持 CSS 中的 background-image 也不支持 HTML background属性。所以 VML 确实是通常的方法。我今年写了一篇关于模仿background properties in VML的post。 <v:fill> 元素需要以下相应的 VML 属性。在你的情况下，它将是：

background-size:cover : aspect="atleast"
background-repeat:no-repeat : type="frame"

table 个单元格中的 Mailchimp 背景图像

Mailchimp background images in table cells

html

email

templates

styles

mailchimp