简体   繁体   English

HTML电子邮件模板

[英]HTML e-mail template

I know this is pushing reality a bit, but I need to ask this question... 我知道这有点推动现实,但是我需要问这个问题...

Is it possible to have a fixed background image with no-repeat on, and with a table in front of the image? 是否可以使用不重复的固定背景图像,并且图像前面有桌子?

My problem at the moment is, that if the table in front of the current image gets to long, (longer than the image height) then the image repeats it self downwards and it looks really ugly and unprofessional. 目前我的问题是,如果当前图像前面的桌子变长(比图像高度长),则图像会向下自我重复,看起来非常丑陋且不专业。

Div is out of the question, it doesn't work with e-mails that well. Div是不可能的,它不能很好地处理电子邮件。

The image is basically from top to bottom a black to light blue shade image. 该图像基本上是从上到下的黑色到浅蓝色的阴影图像。

below is the html template i'm using to merge with my outlook email. 以下是我用于与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>

The way I got around this was to add a load of colored padding to the image at the bottom. 我解决这个问题的方法是在底部的图像上添加大量的彩色填充。 The cell will hide all this until it is pushed down and you don't have to worry about CSS styles not working in various email browsers. 该单元将隐藏所有这些内容,直到将其推下为止,您不必担心CSS样式在各种电子邮件浏览器中无法正常工作。

Background images are a pain in a lot of email browsers. 在许多电子邮件浏览器中,背景图片都是令人头痛的事情。 You can however 'hack' them into Outlook 2007 if you really need to - http://emailmarketingvoodoo.com/blog/post/outlook-2007-can-now-render-background-images/ 但是,如果确实需要,可以将它们“黑客”到Outlook 2007中-http://emailmarketingvoodoo.com/blog/post/outlook-2007-can-now-render-background-images/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM