在 Hotmail/Outlook 的 HTML 电子邮件上设置背景图像

Question

我们一直在制作一封 HTML 电子邮件，标题中包含背景图像，上面有一些文本。我们在实现这一目标时遇到了一些麻烦，但看起来我设法让它在大多数读者中显示，尽管某些 Outlook 没有按预期显示图像，但这可以接受。

我发现有趣的是，似乎根本没有任何方法可以在 Hotmail/Outlook.com/MSN 阅读器上显示背景图像。我一直在使用 litmus.com 进行验证和预览，代码分析为我提供了以下信息：

background-color is unsupported
background repeat is unsupported
background position is unsupported
background url is unsupported
background is unsupported

因此，虽然我可以阅读 Stackoverflow 周围的一些答案，说您可以使用完整的“后台”属性使其在 Hotmail 上工作，因为 Hotmail 已变成 Outlook.com，但我感觉这样的事情不再受支持？

我还使用此代码在 Outlook 上显示它（我认为）：

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->

我们拥有标题的代码片段如下所示：

<!-- Header -->
<table style="background-color: #00a8e2; position: relative; left: 0px; top: 0px;" class="full" align="center" bgcolor="#00a8e2" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="background: #00a8e2 url('https://www.google.co.uk/images/srpr/logo11w.png') no-repeat center top; background-size: cover;" id="BGheaderChange" align="center">

            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
              <v:fill type="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
              <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
            <![endif]-->
            <div>

                <!-- Wrapper -->
                <table class="mobile" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td align="center">

                            <!-- Nav Mobile Wrapper -->
                            <table class="full" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
                                <tr>
                                    <td align="center" width="100%">


                                        <!-- SORTABLE -->
                                        <div class="sortable_inner ui-sortable">

                                            <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                                <tr>
                                                    <td height="100" width="100%"></td>
                                                </tr>
                                            </table><!-- End Space -->

                                            <!-- Text -->
                                            <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
                                                <tr>
                                                    <td style="font-size: 47px; color: #ffffff; text-align: center; font-family: Helvetica,Arial,sans-serif; line-height: 50px; font-weight:bold; vertical-align: top;" class="font32" align="center" width="100%">

                                                        <p cu-identify="element_0033719102905743314">
                                                            <span style="color: rgb(255, 255, 255); font-weight: 900; " class="font40"><span style="font-family: 'Arial'; font-weight: bolder; word-break: break-word; letter-spacing: 1.3px;"><strong>The title of the email!!</strong></span></span>


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

                                            <table cu-identifier="element_07614343859779409" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
                                                <tr>
                                                    <td height="20" width="100%"></td>
                                                </tr>
                                            </table>

                                            <!-- Button -->
                                            <!-- End Button -->

                                            <div style="display: none;" id="element_0016519852050701167"></div><!-- End Space -->

                                            <table cu-identifier="element_006155826625549221" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                                <tr>
                                                    <td height="10" width="100%"></td>
                                                </tr>
                                            </table><div id="element_049618199923274187" style="display: none;"></div><div id="element_049618199923274187" style="display: none;"></div><!-- End Space -->

                                        </div><!-- End SORTABLE -->

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

                        </td>
                    </tr>
                </table><!-- End Wrapper -->

            </div>
            <!--[if gte mso 9.]>
             </v:textbox>
            </v:fill></v:rect>
            <![endif]-->
</div>
    </td>
</tr>
</table>
<!-- Header End -->

我们购买了一个模板来执行此操作并正在尝试对其进行修改，该模板包含背景图像，但在不同的阅读器上进行测试时，看起来甚至默认模板也没有正确完成:(（事实上，我必须修复它现在大多数读者都可以接受，但 Outlook.com 除外）

非常感谢您的帮助:)

Answer 1

好吧，经过更多研究，我发现没有任何一家公司向我发送竞选电子邮件时使用背景图像（包括亚马逊、BBC 或许多其他拥有大量现金和令人难以置信的前端的公司），这让我很好地猜测使用HTML 电子邮件中的背景图像可能不是一个好方法。

我不确定是否有任何方法可以让它们在 Hotmail/MSN Live/Outlook.com 中工作，因为 Litmus 说它不支持 atm（2015 年 3 月），但我们决定更改设计并使其在没有背景图像的情况下工作。

我们仍然可以使用图像，只是确保我们不需要它们出现在背景上。这就是我们最终的解决方案。

感谢那些花时间尝试提供帮助的人:)