HTML电子邮件模板

时间:2011-12-09 09:16:57

标签: html css html-email

我知道这有点推动现实,但我需要问这个问题......

是否可以使用不重复的固定背景图像,并在图像前面放置一个表格?

我目前的问题是,如果当前图像前面的表格变长(长于图像高度),那么图像会自动向下重复,看起来非常丑陋且不专业。

Div是不可能的,它不适用于电子邮件。

图像基本上是从上到下的黑色到浅蓝色图像。

下面是我用来与我的Outlook电子邮件合并的html模板。

<body style="background: transparent url(<MY IMAGE>;);">
<table align="center" border="0" cellpadding="0" cellspacing="0" width=700">
        <tbody style="text-wrap:normal;word-wrap:break-word">
            <tr>
                <td>
                    <font face="Verdana"><img height="20" src="<MY IMAGE>" style="width: 700px; height: 20px;" width="1" /></font></td>
            </tr>
            <tr>
                <td>
                    <font face="Verdana"><img height="80" src="<MY IMAGE>" style="width: 750px; height: 80px;" width="750" /></font></td>
            </tr>
            <tr>
                <td align="left" bgcolor="#FFFFFF" style="padding: 10px;">
                    <p>
                        <span style="font-size: 14pt;"><strong><span style="color: rgb(0, 0, 128);"><font face="Verdana">Place Heading here.</font></span></strong></span><br />
                        <br />
                        <span style="font-size: 10pt;"><span style="font-family: arial,helvetica,sans-serif;">Place text here.
                        Place text here.Place text here.
                        <br />
                        <br />
                        </span></span></p>
                </td>
            </tr>
            <tr>
                <td>
                    <font face="Verdana"><img height="90" src="<MY IMAGE>" style="width: 750px; height: 90px;" width="750" /></font></td>
            </tr>
            <tr>
                <td align="left" bgcolor="#83B5D4" style="font-size: 9px; color: rgb(255, 255, 255);">
                    <font face="Verdana"><img height="10" src="<MY IMAGE>" style="width: 10px; height: 10px;" width="10" /></font></td>
            </tr>
            <tr>
                <td align="center" bgcolor="#162C76" style="padding: 10px;" valign="middle">
                    <font color="#FFFFFF" face="Verdana" style="font-size: 10px; line-height: 1.5em;">Tel: +27 11 454 1074 | Fax: +27 11 454 1073 | <a href="mailto:support@psiber.co.za" style="color: rgb(255, 255, 255); text-decoration: none;">support@psiber.co.za</a> | <a href="http://cts.vresp.com/c/?PSIberSolutions/45620e101d/TEST/b2198ee889" style="color: rgb(255, 255, 255); text-decoration: none;" target="_blank">www.psiberworks.com</a><br />
                    15 Seventh Avenue, Edenvale, 1610</font></td>
            </tr>
        </tbody>
    </table>
</body>

1 个答案:

答案 0 :(得分:0)

我解决这个问题的方法是在底部的图像上添加一堆彩色填充物。单元格将隐藏所有这些,直到它被按下,您不必担心CSS样式无法在各种电子邮件浏览器中工作。

背景图片在许多电子邮件浏览器中都很痛苦。但是,你可以“破解”#39;如果您确实需要 - http://emailmarketingvoodoo.com/blog/post/outlook-2007-can-now-render-background-images/

,它们将进入Outlook 2007