Водяной знак в электронной почте GMail с использованием встроенного CSS - Нельзя использовать тег STYLE - Наложение прозрачного изображения в центре тела письма

Question

Мне нужно поместить водяной знак в тело письма Gmail с помощью скрипта Apps. Код для отправки электронного письма написан в скрипте Apps, используя:

MailApp.sendEmail(contents);

Gmail не разрешит использование тега STYLE в HTML для электронной почты. Таким образом, единственный способ стилизовать HTML-код - использовать теги HTML.

Когда я пытаюсь использовать position:absolute или position:fixed или position:relative во встроенном стиле HTML для электронной почты, это не работает. Есть ли способ разместить прозрачный элемент 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 свойств CSS и медиа-запросов

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

  });
}