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

【问题标题】：Incorrect text position in HTML email with background image带有背景图像的 HTML 电子邮件中的文本位置不正确
【发布时间】：2023-03-08 12:25:01
【问题描述】：

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

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

这是 Html 代码：

<!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 streamreader mailmessage

【解决方案1】：

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container" style="
  position: relative;
  text-align: center;
  color: #0d2a40;
  font-weight: 600;
  font-size: 90px;
  font-family: "Neue Helvetica W01", Arial, Roboto, sans-serif;
  ">
      <img src="$$Image$$" usemap="#imgmap" />
  <div class="centered" style="
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor:pointer;
  ">$$Centered$$</div>
</div>

</body>
</html>

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

【讨论】：

感谢您的建议，但遗憾的是这不起作用，问题仍然存在。