c# html电子邮件- Div/文本超过图像

本文关键字:文本 图像 Div html 电子邮件 | 更新日期: 2023-09-27 17:50:05

我试图创建一个好看的电子邮件,当用户在我的网站上注册,但我不能在图像上显示文本通常的方式。相反,文本显示在图像下方。

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

我有一个背景图像,我正在拉伸(通过设置它的宽度和高度),我想把一些文字在这个图像的顶部。在普通的html中,我可以使用css方法,如float: left;位置:绝对,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>

如果你改变"background-image: url(background.png);"为"background:red;"它工作,这是令人困惑的!

我如何使这在大多数电子邮件客户端正常工作?(Gmail, Hotmail, Outlook, Thunderbird, Windows Mail等)

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

c# html电子邮件- Div/文本超过图像

你应该在Outlook 2007中查看你所有的邮件。微软通过使用Word的渲染引擎破坏了电子邮件中HTML的功能。为此,背景图像不能被Outlook 2007识别。以下是Outlook中支持的HTML的MSDN。使用outlook作为你的基线,因为它的支持是最基本的。

我对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);

你不能使用相对url(例如"url(background.png)"或"url(images/background.png)",因为它是相对于什么?邮件信息?电子邮件信息没有文件夹、文件系统等,就像web服务器一样。

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

我讨厌传递坏消息,但你不能跨平台(这是一个词吗?)在HTML电子邮件中使用背景图像和/或堆叠元素

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

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

还有一本你可能会感兴趣的sitepoint书:

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