使用内联 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

  });
}

Answer 2

我用来添加水印的 HTML 是：

function test_Send_Email_With_Styling() {
  var html = '<div style="background-image: url(' + "'" + 'https://i.imgur.com/40mRGbt.png' + "'" + 
    ');background-repeat: no-repeat;background-position: center;opacity:0.5">'

  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>';
    
  html = html + '</div>';//Add an ending tag for the background image DIV
  
  var myEmail = Session.getEffectiveUser().getEmail();//Send email to yourself
  
  try{
    GmailApp.sendEmail(myEmail, "Test Watermark", "", {htmlBody:html})
  } catch(e) {
  
    MailApp.sendEmail({
      to: myEmail,
      subject: "Test Watermark",
      htmlBody: html

  });
  
  }
}

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

Watermark in GMail email using inline CSS - Can't use STYLE tag - Overlay transparent image in center of email body

css

email

gmail

watermark

google-apps-script