HTML-发送带有图像背景的电子邮件-堆栈溢出

顺晟科技

2022-10-19 14:37:45

172

我正在使用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> <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>

有什么想法如何在电子邮件中显示文本而不是图像吗？谢谢

顺晟科技：

Windows上的外观不支持背景图像。但是您可以使用VML来模仿该特性。如果希望将背景应用于整个窗口，代码应如下所示:

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

另外，最好链接到宿主映像，而不是在Base64中嵌入映像。您可以查看电子邮件客户端对background-image和base64 images在caniemail.com上的详细支持。

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

上一篇：HTML-JavaScript更新字下一篇：html-class不追加到java

网站建设

Html

HTML-发送带有图像背景的电子邮件-堆栈溢出