Question

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

我知道我不能使用StyleSheets，我应该坚持使用CSS 1.4 ..

我有一个背景图像，我正在伸展（通过设置它的宽度和高度），我想在这个图像的顶部放置一些文字。在普通的html中，我可以使用css方法，如float：left; 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>

OR

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

OR

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

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

如何在大多数电子邮件客户端中正常运行？（Gmail，Hotmail，Outlook，Thunderbird，Windows Mail等）

感谢您提供的任何帮助：）

Answer 1

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

Answer 2

Iv在电子邮件中的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（background.png）”或“url（images / background.png）”，因为它与电子邮件相关？电子邮件没有文件夹，文件系统等，与Web服务器一样。

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

Answer 4

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

Answer 5

您正在尝试使用所有主要电子邮件查看者都不支持的CSS功能。试着看看这里有什么支持，什么不支持：

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

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

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

C＃html电子邮件 - Div / Text over Image

5 个答案: