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

我们制作了一封HTML电子邮件，邮件头有背景图片，上面有一些文字。我们遇到了一些麻烦，使它发生，但似乎我设法使它在大多数读者看来，虽然一些Outlook的人没有显示预期的图像，但这是可以接受的

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

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

所以，当我读到Stackoverflow的一些答案时，我觉得随着Hotmail变成outlook.com，你可以使用完整的“后台”属性在Hotmail上运行，这样的东西不再受支持了

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

标题处的代码如下所示：

<!-- 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除外）

---

非常感谢您的帮助：）

您的代码在我看来很不错，这是我的一封电子邮件中的一个片段，适用于所有平台

保护您的在线身份

@DOMAINNAME@现已公开

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

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

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

---

感谢那些花时间帮助我的人：）

2016年的hotmail对我不起作用。本声明“

<!-- 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 -->