C# html 电子邮件 - 图像上的 Div/文本

Posted 2023-03-05

【中文标题】C# html 电子邮件 - 图像上的 Div/文本

【英文标题】：C# html Email - Div/Text over Image

【发布时间】：2011-08-04 06:32:31

【问题描述】：

我正在尝试为用户在我的网站上注册时创建一个漂亮的电子邮件，但是我无法以通常的方式在图像上显示文本。相反，文本显示在图像下方。

我知道我不能使用样式表，我应该坚持使用 CSS 1.4..

我有一张正在拉伸的背景图片（通过设置它的宽度和高度），我想在这张图片上放一些文字。在普通的 html 中，我可以使用 float:left; 等 css 方法。 position: div 浮动在图像上的绝对位置。但这在 C# 代码中不起作用，因为它在大多数电子邮件客户端中会被截断。

只有按以下方式写入图像才会显示：

 <div style='width: 580px; font-family: Calibri; font-size:13px;'>

         <img style='height: 45px;   width: inherit;' src='http://www.somedomain.com/mail/background.png' />
Test
Test2
Test3
</div>

我尝试将上面的代码嵌入到样式中，但它根本不起作用。例如：

<div style='background:url(images/background.png); position: absolute; top:45px; width:550px; padding: 15px;'> SOME TEXT HERE </div>

或

<div style='background-image:url(images/background.png); position: absolute; top:45px; width:550px; padding: 15px;'> SOME TEXT HERE </div>

或

<table>
<tr>
<td style="background-image: url(background.png);">Testing Page</td>
</tr>
</table>

如果您更改“背景图片：url（background.png）；”到“背景：红色；”它有效，这令人困惑！

如何在大多数电子邮件客户端中也能正常工作？ （Gmail、Hotmail、Outlook、Thunderbird、Windows Mail 等）

感谢您提供的任何帮助:)

【参考方案1】：

您可能应该在 Outlook 2007 中查看所有电子邮件。Microsoft 通过使用 MS Word 的呈现引擎确实打破了电子邮件中 ​​HTML 的功能。为此，Outlook 2007 无法识别背景图像。这是MSDN on supported HTML in Outlook。使用 Outlook 作为您的基线，因为它的支持是最基本的。

【讨论】：

对于图片，您应该使用完全限定的 URL（即yoursite.com/images/image.png

我正在使用电子邮件客户端，例如 hotmail 和 gmail，因为不是每个人都使用 Microsoft Outlook。几乎涵盖了所有基础。

是的，但它们中的大部分会这样，所以如果你为最坏的情况编写代码，你通常会在最好的情况下被覆盖。

【参考方案2】：

我对 html 中的图像和电子邮件中的图像有类似的问题。我通过使用内联附件解决了图像问题。诀窍是使用内容 ID 来设置图像。

希望这段代码会有所帮助：

编辑：实际图像上的宽度和高度设置似乎不起作用。 . . ：/

        string contentID = "Image1.gif".Replace(".", "") + "@test";

        // create the INLINE attachment
        string attachmentPath = Server.MapPath("Images/Image1.gif");

        inline = new Attachment(attachmentPath);
        inline.ContentDisposition.Inline = true;
        inline.ContentDisposition.DispositionType = DispositionTypeNames.Inline;
        inline.ContentId = contentID;
        inline.ContentType.MediaType = "image/gif";
        inline.ContentType.Name = Path.GetFileName(attachmentPath);

        //then add in the message body
        //stringbuilder to construct the message
        sb = new StringBuilder();

        sb.Append("<div style=\"font-family:Arial\"> Hello World!<br /><br /><img src=\"@@IMAGE@@\" alt=\"\" Width=\"250px\" Height=\"250px\"><br /><br /></div>");

        //creating the message with from and to and the smpt server connections
        mail = new MailMessage("[e-mail]", "[e-mail]");
        SmtpServer = new SmtpClient("smtp.gmail.com"); //Add SMTP settings into the Web.Config --> ConfigurationManager.AppSettings["MyCustomId"]

        mail.Subject = "Testing Emails";
        mail.IsBodyHtml = true;
        mail.Body = sb.ToString();
        mail.Attachments.Add(inline);

        // replace the tag with the correct content ID
        mail.Body = mail.Body.Replace("@@IMAGE@@", "cid:" + contentID);

【参考方案3】：

您不能使用相对 url（例如“url(background.png)”或“url(images/background.png)”，因为它是相对于什么？电子邮件？电子邮件没有文件夹、文件系统等，就像网络服务器一样。

您有两个选择：使用第一个示例中的完整 url 语法或创建 MimeHtml 消息 (MHTML)。在 MHTML 中，您可以将图像与电子邮件捆绑在一起，并且可以按照您希望的方式引用它。

【讨论】：

该图像是指向网络服务器上图像的正确链接，而不是像普通网站那样的文件夹，但它仍然无法正常工作。问题写得很快。道歉。

【参考方案4】：

我讨厌成为坏消息的传播者，但你不能跨平台（这是一个词吗？）拥有背景图片和/或堆叠元素在 HTML 电子邮件中。

【讨论】：

除此之外，如果您的发件人使用 Microsoft Outlook 作为其客户端电子邮件应用程序，您将遇到问题，因为 MS Outlook 使用的电子邮件呈现基于 MS Word，而不是浏览器IE中的设置。因此，它很有可能无法正常显示。 （见这篇文章：blogs.sitepoint.com/…）

【参考方案5】：

您正在尝试使用并非所有主要电子邮件查看器都支持的 CSS 功能。尝试查看此处，了解哪些支持，哪些不支持：

http://www.campaignmonitor.com/css/

还有一本您可能感兴趣的站点点书：

http://www.sitepoint.com/books/htmlemail1/

【讨论】：

而且，正如其他人所说，网址必须是绝对的，就像您在

中所做的那样

我最初确实使用了整个 url（一个实际链接），但那没有用，所以我尝试了从文件夹链接图像的传统方法，但也没有用，但现在我明白了为什么第二种方法不适合这种情况。