如何将背景图像放在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,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;

文本框，但是，不是很好，因为内容将在表格单元格中提供链接。

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

我最近写了一篇关于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>必须在你想要的内容之后关闭。
在<tr>上应用CSS背景对我来说有点粗略。虽然这可能只是个人偏好，但我宁愿在这里使用<div>。
HTMLbackground现在真的没有必要了。CSS背景属性现在得到了很好的支持。

下面是我重写的完整代码示例:

<!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>

在这里你可以看到Email on Acid的测试截图。

相关内容

最新更新

热门标签：