Javascript 如何将水印文本添加到图像上并相应地显示在html电子邮件中？_Javascript_Html_Css_Google Apps Script

Javascript 如何将水印文本添加到图像上并相应地显示在html电子邮件中？

javascript html css google-apps-script

Javascript 如何将水印文本添加到图像上并相应地显示在html电子邮件中？,javascript,html,css,google-apps-script,Javascript,Html,Css,Google Apps Script,我想把水印文本斜放在图像上，这两个输入都是通过谷歌表单提交的。但是在我创建gform之前，我想先测试一下，当我们以html电子邮件的形式发送完整的图像时，是否可以显示带有水印文本的完整图像。我参考了我的html代码的答案，并编写了一个简单的GAS来调用html并发送电子邮件。当我在html电子邮件编辑器中粘贴html代码时，输出看起来与预期一样。但是，当我运行gs文件并检查电子邮件收件箱时，水印文本不会覆盖在预期的图像上。水印只是打印在图像下方。有人能帮我修一下吗？或者这是可能实现的？下面是我的

我想把水印文本斜放在图像上，这两个输入都是通过谷歌表单提交的。但是在我创建gform之前，我想先测试一下，当我们以html电子邮件的形式发送完整的图像时，是否可以显示带有水印文本的完整图像。我参考了我的html代码的答案，并编写了一个简单的GAS来调用html并发送电子邮件。当我在html电子邮件编辑器中粘贴html代码时，输出看起来与预期一样。但是，当我运行gs文件并检查电子邮件收件箱时，水印文本不会覆盖在预期的图像上。水印只是打印在图像下方。有人能帮我修一下吗？或者这是可能实现的？下面是我的gs和html代码。提前完成TQM

我的GS代码：-

function myKad() {
  var myIC=HtmlService.createTemplateFromFile("MyKad");
  var mykad = myIC.evaluate().getContent();

  MailApp.sendEmail('dellzy76@gmail.com','Your MyKad','',{htmlBody:mykad});
}

我的HTML代码：-

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <style>#watermark {
  height: 200px;
  width: 300px;
  position: initial;
}
#watermark img {
  max-width: 100%;
}
#watermark p {
  max-width: 20%;
  position: absolute;
  top: 0;
  left: 0.2;
  color: #FF0000;
  opacity: 100%;
  font-size: 10px;
  pointer-events: none;
  -webkit-transform: rotate(-35deg);
  -moz-transform: rotate(-35deg);
}
</style>


  <body>
 <div id="watermark">
  <br>
  <br>
  <img src="https://share1.cloudhq-mkt3.net/563d38db6253d3.jpeg" alt="MyKad" width="250" height="160">
  <p><br>
  <br><br><b>----------------
  <br><i>This is just a copy for JPJ purposes ONLY
  <br>------------------<b></b></p>
</div>   
  </body>
</html>


#水印{
高度：200px；
宽度：300px；
位置：初始；
}
#水印图像{
最大宽度：100%；
}
#水印p{
最大宽度：20%；
位置：绝对位置；
排名：0；
左：0.2；
颜色：#FF0000；
不透明度：100%；
字体大小：10px；
指针事件：无；
-webkit变换：旋转（-35度）；
-moz变换：旋转（-35度）；
}








----------------

这只是一份仅供JPJ使用的副本

------------------

期望值：

电子邮件收件箱中的当前输出：

不幸的是，Gmail HTML没有普通HTML那么包容这是一份清单

因此，您必须使用不同类型的CSS使其工作，或者尝试解决方法，例如在单独的HTML实例中生成图像，然后将其导出为图像以驱动，然后将其作为图像附加到邮件中。

感谢您的澄清和建议。我们将探索解决方法。