如何在 HTML 电子邮件上放置背景图像，并具有表格行的动态高度？

如何解决如何在 HTML 电子邮件上放置背景图像，并具有表格行的动态高度？

我正在创建 HTML 电子邮件，并希望表格行部分中的背景图像显示该行中表格单元格后面的背景图像。

据我了解，对于 Microsoft Outlook，我需要使用表结构，并阅读以下文章：

https://www.emailonacid.com/blog/article/email-development/html-background-images-in-email/ http://www.emaildesignreview.com/email-code/html-bulletproof-background-images-in-email-3850/ https://backgrounds.cm/ https://buttons.cm/

那些页面指定了宽度和高度，但我想要一个动态宽度和高度来填充表格行内容后面的表格行。

我已经尝试过 VML，它把背景放在背景的顶部并弄乱了表格的宽度。

到目前为止，我的布局是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="width=device-width" name="viewport"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
</head>
<body id="body">
<div style="display: block; width: 100%;">      
<table role="presentation" align="center" width="600" style="border-collapse: collapse; table-layout: fixed;mso-table-lspace: 0pt; mso-table-rspace: 0pt; table-layout:fixed; width: 600px;">
<tr cellpadding="0" cellspacing="0" background="img.jpg" style="background-image: url(img.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;">

<!--[if mso]>
<v:rect fill="true" stroke="false" style="width: 600px;">
<v:fill type="frame" src="img.jpg"/>';
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0">
</v:rect>
<![endif]-->

<td colspan="3">
<p style="text-align: center;">Heading</p>
</td>
</tr>
<tr>
<td width="50%" height="100px"><p>Lorem ipsum dolor sit amet,<a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus. Donec quam felis,ultricies nec,pellentesque eu,pretium quis,sem. Nulla consequat massa quis enim. Donec pede justo,fringilla vel,aliquet nec,vulputate eget,arcu. In enim justo,rhoncus ut,imperdiet a,venenatis vitae,<a href="#">justo</a>. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,porttitor eu,consequat vitae,eleifend ac,enim. Aliquam lorem ante,dapibus in,viverra quis,feugiat a,</p></td>
<td width="50%" height="100px"><p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,</p></td>
</tr>
</table>
</div>
</body>
</html>

而且我已经尝试了 mso-width-percent、mso-height-percent、width、height 的内联样式。仍然不适合指定的 600px。我希望背景像这样的 CSS：

background-repeat: no-repeat;
background-position: center;
background-size: cover;

然而，v:textbox 并不好，因为内容会在表格单元格中提供链接。

使用支持 CSS 的客户端，它可以按预期工作，而且更容易，但不适用于 Outlook。

解决方法

原来我最近写了一篇关于 background properties in VML 的文章。以下是您提到的 CSS 属性的 <v:fill> 元素在 VML 中的等效项：

type="frame" 等价于 background-repeat: no-repeat;
origin="0,0" position="0,0" 等价于 background-position: center;（它也是 <v:fill> 的默认值，所以我们可以简单地省略它）
aspect="atleast" 等价于 background-size: cover;

还有一些关于您发布的代码的注释：

<v:fill> 元素的末尾有一个额外的引号和分号 (<v:fill type="frame" src="img.jpg"/>';)
在 VML 中，</v:textbox> 和 </v:rect> 必须在您想要的背景内容之后关闭。
将 CSS 背景应用于 <tr> 对我来说有点粗略。虽然这可能只是个人偏好，但我更愿意在此处使用 <div>。
现在真的不需要 HTML background。 CSS background property 现在得到了很好的支持。

这是我重写的完整代码示例：

<!DOCTYPE html>
<html lang="en" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Background</title>
    <!--[if mso]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body>
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px; margin:0 auto;">
        <tr>
            <td>
                <div style="background:0 0/cover; background-image:url(https://i.imgur.com/d4mw7CC.jpg); background-size:cover; background-repeat:no-repeat; background-position:center;">
                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                        <tr>
                            <td>
                                <!--[if mso]>
                                <v:rect filled="true" stroked="false" style="width:600px;">
                                    <v:fill aspect="atleast" type="frame" src="https://i.imgur.com/d4mw7CC.jpg" />
                                    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0">
                                <![endif]-->
                                <p style="text-align: center;">Heading</p>
                                <!--[if mso]>
                                    </v:textbox>
                                </v:rect>
                                <![endif]-->
                            </td>
                        </tr>
                    </table>
                </div>
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                    <tr>
                        <td width="50%" height="100px"><p>Lorem ipsum dolor sit amet,<a href="#">consectetuer</a> adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus. Donec quam felis,ultricies nec,pellentesque eu,pretium quis,sem. Nulla consequat massa quis enim. Donec pede justo,fringilla vel,aliquet nec,vulputate eget,arcu. In enim justo,rhoncus ut,imperdiet a,venenatis vitae,<a href="#">justo</a>. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,porttitor eu,consequat vitae,eleifend ac,enim. Aliquam lorem ante,dapibus in,viverra quis,feugiat a,</p></td>
                        <td width="50%" height="100px"><p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,</p></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

在这里您可以看到 tests screenshots on Email on Acid。

如何在 HTML 电子邮件上放置背景图像，并具有表格行的动态高度？

如何解决如何在 HTML 电子邮件上放置背景图像，并具有表格行的动态高度？

解决方法

相关推荐