Fatal编程技术网
  • office365/
  • Office365 如何将背景图像放置在HTML电子邮件上，并与表格行保持动态高度？

Office365 如何将背景图像放置在HTML电子邮件上，并与表格行保持动态高度？

office365

Office365 如何将背景图像放置在HTML电子邮件上，并与表格行保持动态高度？,office365,html-email,microsoft365,Office365,Html Email,Microsoft365,我正在创建HTML电子邮件，并希望在表格行部分的背景图像显示该行表格单元格后面的背景图像 据我所知，对于Microsoft Outlook，我需要使用表结构，并阅读以下文章： 这些页面指定了宽度和高度，但我需要一个动态的宽度和高度来填充表格行内容后面的表格行 我已经试过VML了，它把背景放在背景的顶部，弄乱了桌子的宽度 到目前为止，我通过这样的布局做到了这一点： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" &q

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

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

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

我已经试过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>
然而，v:textbox是不好的，因为内容会在表格单元格中提供链接

对于支持CSS的客户端，它可以像预期的那样工作，而且容易得多，但不能与Outlook一起工作。

事实证明，我最近写过一篇文章。以下是您提到的CSS属性的
元素在VML中的等价物：

  • type=“frame”
    相当于
    后台重复：无重复
  • origin=“0,0”position=“0,0”
    相当于
    背景位置：中心（它也是
    的默认值，因此我们可以忽略此项）
  • aspect=“至少”
    相当于
    背景尺寸：封面
还有一些关于您发布的代码的注释：

  • 元素的末尾有一个额外的引号和分号（
    ”；
    ）
  • 在VML中，
    和
    必须在您想要的内容出现在后台之后关闭
  • 将CSS背景应用于
    对我来说有点粗略。虽然这可能只是个人喜好，但我更愿意在这里使用
  • HTML
    background
    现在真的没有必要了。现在，这个应用程序得到了很好的支持
下面是我重写的完整代码示例：


背景
标题

Lorem ipsum dolor sit amet，告别精英。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。阿利奎姆·洛勒姆·安特，达比布斯，维韦拉·奎斯，费吉亚特·a

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。阿利奎姆·洛勒姆·安特，达比布斯，维韦拉·奎斯，费吉亚特·a
在这里你可以看到。

我最近写过。以下是您提到的CSS属性的
元素在VML中的等价物：

  • type=“frame”
    相当于
    后台重复：无重复
  • origin=“0,0”position=“0,0”
    相当于
    背景位置：中心（它也是
    的默认值，因此我们可以忽略此项）
  • aspect=“至少”
    相当于
    背景尺寸：封面
还有一些关于您发布的代码的注释：

  • 元素的末尾有一个额外的引号和分号（
    ”；
    ）
  • 在VML中，
    和
    必须在您想要的内容出现在后台之后关闭
  • 将CSS背景应用于
    对我来说有点粗略。虽然这可能只是个人喜好，但我更愿意在这里使用
  • HTML
    background
    现在真的没有必要了。现在，这个应用程序得到了很好的支持
下面是我重写的完整代码示例：


背景
标题

Lorem ipsum dolor sit amet，告别精英。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、。猫的口头禅