Question

像标题一样有问题。有电子邮件模板，一切都很好，但背景图片不适用于Outlook。不幸的是，我国大多数人都使用它。在我的代码下面：

    <!--@subject Email - Header @-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
{{var non_inline_styles}}

<!-- Start Image Background -->
<table class="image-background" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="22262b" background="http://met.ivycommerce.eu/glamoura_main_image.jpg">
    <tr>
        <td class="image-background" align="center" style="background: url('http://met.ivycommerce.eu/pattern.png') 0 0 repeat">
            <table class="container-table" cellpadding="0" cellspacing="0" border="0">           
                <tr>
                    <td class="separator-50" height="50">&nbsp;</td>
                </tr>

                <!-- Start Three Column -->

                <tr>
                    <td>
                        <table class="container-table" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td class="center" align="center">
                                    <a href="{{store url=""}}">
                                        <img style="display: block; margin: 0 auto;"
                                            {{if logo_width}}
                                            width="{{var logo_width}}"
                                            {{else}}
                                            width="165"
                                            {{/if}}

                                            {{if logo_height}}
                                            height="{{var logo_height}}"
                                            {{else}}
                                            height=""
                                            {{/if}}

                                            src="{{var logo_url}}"
                                            alt="{{var logo_alt}}"
                                            border="0"/>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <!-- Start Three Column -->
                <tr>
                    <td class="separator-30" height="30">&nbsp;</td>
                </tr>
                <tr>
                    <td align="center">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="60">
                            <tr>
                                <td class="separator-line" bgcolor="#ffffff" height="1">&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="separator-30" height="30">&nbsp;</td>
                </tr>
                <tr>
                    <td class="colored-heading" align="center" height="28">
                        <div style="line-height: 28px;">Nasza Misja</div>
                    </td>
                </tr>
                <tr>
                    <td class="heading" align="center" height="28">
                        <div style="line-height: 28px;">To uśmiechnięci Klienci</div>
                    </td>
                </tr>
                <tr>
                    <td class="separator-10" height="10">&nbsp;</td>
                </tr>
                <tr>
                    <td class="sub-heading" align="center" height="24">
                        <div style="line-height: 24px;">Dziękujemy, że dołączyłeś do wielkiego grona Bionaturalnych.</div>
                    </td>
                </tr>


                <tr>
                    <td class="separator-50" height="50">&nbsp;</td>
                </tr>
                <tr>
                    <td align="center">
                        <table align="center" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="button" align="center" valign="middle" height="38" width="140">
                                    <a href="{{store url=""}}">Wejdź Do Sklepu</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="separator-50" height="50">&nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- End Image Background -->

<!-- Begin wrapper table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
    <tr>
        <td valign="top" class="container-td" align="center">
            <table cellpadding="0" cellspacing="0" border="0" align="center" class="container-table">
                <tr>
                    <td valign="top" class="top-content">
                    <!-- Begin Content -->

我尝试了一些代码，但没有成功:(当背景还可以，休息时左对齐，但必须是中心。有人能帮助我吗？

Answer 1

Outlook通常需要旧式的编程，并且在网站编程中允许的电子邮件中有许多不允许的内容。这意味着样式包含在标题中时效果最佳，并且无法使用背景图像。如果您想使用背景图像，例如在标题后面，则需要将标题和背景创建为单个图像，以插入任何其他图像。这样做的缺点是Outlook不会下载图像，除非用户指定这样做。由于大多数用户使用Outlook，因此最佳做法是为他们编程，然后在所有其他浏览器中对其进行测试。以下是Mailchimp（电子邮件服务提供商）确定的问题列表，该问题专门与Outlook有关，可以执行哪些修复（如果有）。 http://kb.mailchimp.com/campaigns/previews-and-tests/my-campaign-looks-bad-in-outlook

在审核您提供的代码时，我认为您可能需要考虑以下其他一些事项：

使用固定的测量而不是百分比;
不使用代码进行间距，而是使用1px x 1px透明或背景色图像，您可以调整高度和宽度，使空间按照您想要的方式工作;

将所有样式放在css格式的顶部，例如：

<style type="text/css">
    body{
        margin:0;
        padding:0;
        font-family:"Trebuchet MS", arial, sans-serif;
    }

</style></head>

我已经编写了近十年的电子邮件简报，当大多数用户拥有Outlook时，最简单的基本代码效果最佳。最后，我建议您始终通过html验证程序（例如https://validator.w3.org/）运行代码以检查代码。即使是最小的错误也可能导致Outlook或其他浏览器出现意外结果。

Answer 2

Zydol，要使其工作，您需要使用VML创建一个对象并将背景图像分配给该对象。您可以在此处详细了解此技术：https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds

Answer 3

我相信防弹背景就是您正在寻找的答案！

https://backgrounds.cm/

在后台添加图片，展望问题

3 个答案: