如何在 HTML 行的 table 行动态高度的电子邮件中放置背景图片？
How to place background images on HTML emails with dynamic height from table row?
我正在创建 HTML 电子邮件，并希望 table 行部分中的背景图像显示该行中 table 单元格后面的背景图像。
据我了解，对于 Microsoft Outlook，我需要使用 table 结构，并阅读如下文章：
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/
这些页面指定了宽度和高度，但我想要一个动态宽度和高度来填充 table 行内容后面的 table 行。
我已经尝试过 VML，它把背景放在背景之上，弄乱了 table 宽度。
到目前为止，我的布局是这样的：
<!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,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, 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, justo. 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>
</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 并不好，因为内容会在 table 单元格中提供链接。
使用支持 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,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, 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, justo. 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>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
在这里你可以看到tests screenshots on Email on Acid。
我正在创建 HTML 电子邮件，并希望 table 行部分中的背景图像显示该行中 table 单元格后面的背景图像。
据我了解，对于 Microsoft Outlook，我需要使用 table 结构，并阅读如下文章：
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/
这些页面指定了宽度和高度，但我想要一个动态宽度和高度来填充 table 行内容后面的 table 行。
我已经尝试过 VML，它把背景放在背景之上，弄乱了 table 宽度。
到目前为止，我的布局是这样的：
<!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,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, 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, justo. 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>
</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 并不好，因为内容会在 table 单元格中提供链接。
使用支持 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,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, 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, justo. 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>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
在这里你可以看到tests screenshots on Email on Acid。