表背景图像在电子邮件中

时间:2012-07-24 17:03:44

标签: html css html-email

我的背景图片没有显示在电子邮件中,我遇到了问题。谁能告诉我为什么会发生这种情况。

   <table border="0" cellpadding="0" cellspacing="0" height="489" width="638" align="left" background="http://www.bla.com/images/email-bg.jpg">

以下是带有嵌套表的完整设置,用于覆盖表背景图像顶部的文本。

  <table border="0" cellpadding="0" cellspacing="0" height="489" width="638" align="left" background="images/email-bg.jpg">
     <tr>
            <td valign="top" align="left">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td align="left" valign="top" width="100%" style="font-family: Arial, sans-serif; font-size:12px; color:#585858; padding:35px 230px 0 40px">
                            <p style="font-size:28px; color:#474747">Welcome to <b>bla bla</p>
                            <p style="font-weight:bold; margin-bottom: 4px;">Just click the link below to finish your registration:</p>
                            <a href="#">Continue</a>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" valign="top" width="100%" style="font-family: Arial, sans-serif; font-size:10px; color:#FFF; padding:80px 120px 0 40px">
                            <p style="margin-bottom:0">** Please do not reply to this automated message. The Email box that sent the message is not monitored.**</p>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>

更新代码

我改变了我的代码以使用它而不是使用样式属性

<table border="0" cellpadding="0" cellspacing="0" height="489" width="638" align="left" style="background-image:url(http://www.bla.com/images/email-bg.jpg)">

这适用于Apple邮件客户端,但不适用于Outlook。 有人知道任何前景的答案吗?

4 个答案:

答案 0 :(得分:4)

大多数电子邮件客户端都不显示背景图片。使用纯色。或者一些解决方法。

答案 1 :(得分:3)

无法在Outlook 2007和Outlook 2010中呈现表格和表格单元格上的背景图像。

使用vml hack

<td align="center" bgcolor="#ffffff" style="border-bottom:1px solid #000; border-top:1px solid #000;" valign="middle" background="image_name.jpg">
<!-- EMAIL CONTENT STARTS HERE -->
                <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" 

    style='behavior: url(#default#VML); display:inline-block; position:absolute; height:250px; width:600px; top:0; left:0; border:0; z-index:1;' src="image_name.jpg"/>
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:250px; width:600px; top:-5; left:-10; border:0; z-index:2;'>
             <![endif]-->
    <table>
    <tr><td>CONTENT HERE</td></tr>

    </table>

<!-- EMAIL CONTENT ENDS HERE -->
                <!--[if gte mso 9]>
            </v:shape>
            <![endif]-->

确保高度和宽度正确且应该可以正常工作

答案 2 :(得分:0)

试试这个: 填写代码中的相关信息,并将其放在您希望图像作为背景的位置。

  

答案 3 :(得分:-1)

除非设置了基本href,否则您的图像路径应包含整个路径(http://domain/path),因为电子邮件客户端不知道您所指的域名。