发送带有图像背景的电子邮件答案

【问题标题】：Sending email with image background发送带有图像背景的电子邮件
【发布时间】：2021-10-05 08:35:20
【问题描述】：

我正在使用 Microsoft Flow 发送一封应以图片为背景的电子邮件。所以我创建了以下代码

<html> <body>     <div style="width:100%, heith:100%">
<div style= "position:fixed  ;  width:500px; height=500px; top:1%; left:1%; ">
<img src="data:image/jpeg;base64,@{outputs('GifFile')?['body']['$content']}"  alt="My Background" width="500" height="600">  </div>

<div style= "position:fixed  ;   top:5%; left:5%; ">
  CONTENT <br/> More Content  </div> 
</div>
 </body>
<html> <body>

但在 Outlook（对于 Microsoft 365）中，它仍会在图片下显示文本，如果我将消息源保存为 html 文件 - 它会在图像上显示文本，正如预期的那样。

还尝试了另一个代码：

<html> <head>
   <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
  </head>
<body>
  <div style="background:0 0/cover;background-image: url('data:image/jpeg;base64,R0lGODlhAwG2APeL ** Image code in here ** IBLAJCAA7') ;background-repeat:repeat;background-color:#ffffff;background-position:center;">
 <!--[if mso]>
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
      <v:fill type="tile" src='data:image/jpeg;base64,R0lGODlhAwG2APeL ** Image code in here ** IBLAJCAA7' color="#ffffff"/>
  </v:background>
<![endif]-->
<div>CONTENT <br>
   More Content</div>
 </div>
</body>
</html>

任何想法如何在电子邮件中的图像上显示文本？
谢谢

【问题讨论】：

欢迎来到 HTML 邮件开发。如果要支持 Outlook，则必须使用表格。那里不支持 90% 的 HTML / CSS 内容。最好获得一个框架来创建您的 HTML 邮件。 mjml.io 类似这样的东西。
请注意，<br> 标签不使用也不需要结束斜线，并且在任何 HTML 规范中都没有。

标签： html outlook background-image html-email

【解决方案1】：

Windows 上的 Outlook 不支持背景图片。但是您可以使用 VML 来模仿该功能。如果你想为整个窗口应用背景，代码如下：

<div style="background:0 0/cover;background-image:url('https://www.example.com/image.jpg');background-repeat:repeat;background-color:#ffffff;background-position:center;">
    <!--[if mso]>
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
        <v:fill type="tile" src="https://www.example.com/image.jpg" color="#ffffff"/>
    </v:background>
    <![endif]-->
    <div>CONTENT <br/> More Content</div>
</div>

此外，更喜欢链接到托管图像，而不是在 Base64 中嵌入图像。您可以在 Caniemail.com 上查看电子邮件客户端中对 background-image 和 Base64 Images 的详细支持。

【讨论】：

试过了，不行:(
你能分享你的整个 HTML 代码吗？
HTeuMeuLeu - 在顶部的问题中添加了它
谢谢。正如我所提到的，嵌入为 Base 64 的图像支持不佳，尤其是在 Outlook 365 中。尝试将图像托管在某个地方。或者在您的电子邮件代码的其余部分将您的图像称为 CID 嵌入对象。

【解决方案2】：

Word（在 Outlook 中呈现电子邮件）不支持正文中的背景图像。尝试改用表格。

【讨论】：