如何在 html 文件中的图像上获取文本块并将其用作 GMail 电子邮件正文来发送电子邮件？答案

【问题标题】：How to get a text block over an image in an html file and use that as GMail email body to send an email?如何在 html 文件中的图像上获取文本块并将其用作 GMail 电子邮件正文来发送电子邮件？
【发布时间】：2020-04-18 03:45:24
【问题描述】：

我正在使用 google 脚本创建一封自动电子邮件，其中电子邮件正文作为 html 内容。以下是我的脚本：

main.gs

function testSchemas() {
  var htmlBody = HtmlService.createHtmlOutputFromFile('template').getContent();

  MailApp.sendEmail({
    to: "user@gmail.com",
    subject: "Test Email",
    htmlBody: htmlBody
  });
}

模板.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  font-family: Arial;
}

.text-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div class="container">
  <img src="https://drive.google.com/uc?export=view&id=[fileID]" alt="TEST" style="width:100%;">
  <div class="text-block">
    <h4>Nature</h4>
    <p>What a beautiful sunrise</p>
  </div>
</div>

</body>
</html>

当我运行此代码时，应该出现在图像上方的文本位于电子邮件中图像的下方。我在这里有什么遗漏吗？

请推荐。

示例输出：

Sample Email

【问题讨论】：

标签： html email google-apps-script gmail

【解决方案1】：

包括 gmail 在内的许多电子邮件客户端都不支持绝对定位，因此如果您打算发送给 gmail 用户，使用它是不安全的。

有很多关于这个主题的讨论，比如email template position absolute?

【讨论】：

【解决方案2】：

您可以使用样式-背景图像属性将图像添加到正文标签，不透明度属性使文本出现在图像上，并使背景居中。

<body style="background-image: url(https://i.imgur.com/40mRGbt.png);background-repeat: no-repeat;background-position: center;opacity:0.5">

CSS Gmail 支持的文档位于： https://developers.google.com/gmail/design/reference/supported_css

Gmail 不会处理 <style> 标记中的 CSS。 Gmail 电子邮件中的所有 CSS 都必须在每个 HTML 标记中，使用样式属性。

完整的html代码：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-image: url(https://i.imgur.com/40mRGbt.png);background-repeat: no-repeat;background-position: center;opacity:0.5">

<div class="container">

  <!-- <img src="https://drive.google.com/uc?export=view&id=[fileID]" alt="TEST" style="width:100%;"> -->

  <div class="text-block">
    <h4>Nature</h4>
    <p>What a beautiful sunrise</p>
    <p>What a beautiful sunrise</p>
    <p>What a beautiful sunrise</p>
    <p>What a beautiful sunrise</p>
    <p>What a beautiful sunrise</p>
    <p>What a beautiful sunrise</p>
    <p>What a beautiful sunrise</p>
    <p>What a beautiful sunrise</p>
    <p>What a beautiful sunrise</p>
    <p>What a beautiful sunrise</p>
  </div>

</div>

</body>
</html>

【讨论】：