带有背景图片的 HTML 电子邮件中的文本位置不正确

问题描述

我有一个控制台应用程序，可以向新用户发送邀请。我正在尝试发送一封 HTML 电子邮件，该电子邮件只是一张图片，上面写有自定义文本。

当您在网络浏览器上打开 HTML 文件时，它看起来像这样（$$Centered$$ 是我稍后将替换的占位符文本，其余的是背景图像）：

<!DOCTYPE html>
<html>
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.container {
  position: relative;
  text-align: center;
  color: #0d2a40;
  font-weight: 600;
  font-size: 90px;
  font-family: "Neue Helvetica W01",Arial,Roboto,sans-serif;
}

.centered {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
  cursor:pointer;
}
</style>
</head>
<body>

<div class="container">
      <img src="$$Image$$" usemap="#imgmap" />
  <div class="centered">$$Centered$$</div>
</div>

</body>
</html>

图像和 HTML 文件位于主项目中名为 Canvas 的文件夹中。

这是我用来发送电子邮件的代码，我使用 StreamReader 来获取 HTML 并用我自己的东西替换占位符文本，因为它必须是带有电子邮件读者姓名的消息。我还将 $$Image$$ 替换为背景图片的路径：

            string filepath = Environment.CurrentDirectory;
            StreamReader reader = new StreamReader(filepath + "//Canvas//Canvas.html");
            string readFile = reader.ReadToEnd();
            string myString = "";
            myString = readFile;
            myString = myString.Replace("$$Centered$$","Hola");
            myString = myString.Replace("$$Image$$",filepath + "//Canvas//Canvas.png");
            MailMessage message = new MailMessage();
            SmtpClient smtp = new SmtpClient();
            message.IsBodyHtml = true;
            smtp.EnableSsl = false;
            smtp.Credentials = new System.Net.NetworkCredential();
            smtp.Host = settings.MailServerAddress;
            smtp.Port = settings.MailServerPort;
            message.To.Add("myemail@outlook.com");
            message.From = new MailAddress(settings.FromAddress,settings.FromName);
            message.Subject = settings.SubjectNotificacion;
            message.Body = myString;
            message.Priority = MailPriority.normal;

            smtp.Send(message);
            reader.dispose();

电子邮件被发送并且文本确实被替换为“Hola”。问题是背景图像似乎在其顶部的自定义文本之前呈现，因此收到的电子邮件最终看起来像这样：

有没有办法解决这个问题，让文字出现在第一张图片中应该喜欢的地方？

解决方法

在 HTML 电子邮件中，最好将 CSS 代码放入 HTML 标签中，如下所示：

compare_models()

当我遇到类似问题时，这对我有用。

html mailmessage mailmessage streamreader