表格单元格中的 Mailchimp 背景图像

Posted 2023-03-24

【中文标题】表格单元格中的 Mailchimp 背景图像

【英文标题】：Mailchimp background images in table cells

【发布时间】：2021-08-16 14:28:48

【问题描述】：

我正在尝试创建一个 mailchimp 模板，但我遇到了与表格单元格中的背景图像的兼容性问题。

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

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

我越来越接近做这样的事情：

<table class="wrapper"  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  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;"

造型？ 此外，出于某种原因，它会将嵌套表推到左侧而不是中心。我认为是 div 可以做到这一点。

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

谢谢。

【参考方案1】：

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

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

【讨论】：

感谢您的信息。

【参考方案2】：

请试试这个

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