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

Question

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

我知道我不能使用样式表，我应该坚持使用 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 等）

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

Answer 1

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

Answer 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("SendersEmail@Address.com", "RecieversEmail@Address.com");
        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);

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

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