css - 使用内联 CSS 的 GMail 电子邮件中的水印 - 无法使用 STYLE 标签 - 在电子邮件正文中心覆盖透明图像

Question

我需要使用 Apps 脚本在 Gmail 电子邮件的正文中添加水印。发送电子邮件的代码是使用 Apps 脚本编写的:

MailApp.sendEmail(contents);

Gmail 不允许在电子邮件的 HTML 中使用 STYLE 标签。因此，设置 HTML 样式的唯一方法是在 HTML 标记内。

当我尝试在电子邮件的 HTML 内联样式中使用 position:absolute 或 position:fixed 或 position:relative 时，它不起作用。有没有办法在电子邮件正文的内容上放置一个透明的 HTML 元素？我需要在服务器端 Apps 脚本代码中执行此操作。

这是我尝试过的:

function test_Send_Email_With_Styling() {
  var html = '<div style="position:fixed;top:40px;left:60px;background-color: red;opacity:0.5">\
    Watermark Here\
  </div>';

  html = html + '<div>Line One</div>\
    <div>Line Two</div>\
    <div>Line 3</div>\
    <div>Line 4</div>\
    <div>Line 5</div>\
    <div>Line 6</div>\
    <div>Line 7</div>\
    <div>Line 8</div>\
    <div>Line 9</div>';

  MailApp.sendEmail({
    to: "example@gmail.com",
    subject: "Test Watermark",
    htmlBody: html

  });
}

Answer 1

这是 Gmail Supported CSS Properties & Media Queries 的官方列表

position 未列出，因此无法使用。

另一方面，与我的想法相反，background-image 以及 background-position 都受支持，因此您可能可以使用它来制作水印.

我猜只适用于 Gmail 和现代客户端。

function test_Send_Email_With_Styling() {
  var html = '<div style="background-image:url(https://example.com/your-transparent-watermark.gif);
     background-position:60px 40px;background-repeat:no-repeat;">
    <div>Line One</div>\
    <div>Line Two</div>\
    <div>Line 3</div>\
    <div>Line 4</div>\
    <div>Line 5</div>\
    <div>Line 6</div>\
    <div>Line 7</div>\
    <div>Line 8</div>\
    <div>Line 9</div>\
    </div>';

  MailApp.sendEmail({
    to: "example@gmail.com",
    subject: "Test Watermark",
    htmlBody: html

  });
}