在 Outlook 的 HTML 电子邮件中将文本叠加到图像上时出现问题答案

【问题标题】：Trouble overlaying text onto an image in a HTML email for Outlook在 Outlook 的 HTML 电子邮件中将文本叠加到图像上时出现问题
【发布时间】：2014-09-07 18:44:56
【问题描述】：

我已经为电子邮件通讯上的标题图像编写了这个，它允许文本和按钮覆盖图像并且也可以响应。在测试时，它在除 Outlook 2007、2010 和 2013 之外的大多数浏览器中运行良好。

有没有办法让它与这些电子邮件客户端兼容？

谢谢

<tr>
    <td height="auto" align="center" valign="top">
        <table border="0" cellpadding="0" align="center" cellspacing="0" width="100%" id="templateHeader" >
            <tr>
                <td valign="top" height="auto" class="headerContent">
                  <table width="100%" border="0" align="center">
                        <tr>
                            <td class="image-wrapper"> 
                            <img src="header.jpg" width='100%' alt="Header image" /> 
                                <p align="center" class="headerContent1">Heading<br>
                                5th July 2015
                                    <!--[if mso]>
                                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.website.ca/" style="height:30px;v-text-anchor:middle;width:160px;" stroke="f" fillcolor="#53a0ce">
                                    <w:anchorlock/>
                                    <center>
                                  <![endif]-->
                                    <a href="http://www.website.com/"
                                    style="background-color:#53a0ce;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:30px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">Book Now</a>
              <!--[if mso]>
                </center>
              </v:rect>
            <![endif]-->
                                </p>    
                            </td>
                        </tr>
                    </table> 
              </td>
            </tr>



.image-wrapper { position: relative; width: 100%; } 

.image-wrapper p { position: absolute; left: 0; top: 0; padding-top: 10%; padding-left:25%; padding-right:25%; border: 0px solid #FFF; width: 50%; color: #FFF; margin: 0; }

【问题讨论】：

标签： html-email

【解决方案1】：

如果我理解这个问题，您的问题是内容没有显示在图像上。这是由于 Outlook 与您使用的 CSS 的兼容性。

例如，“位置”在任何形式的 Outlook 中都是不可接受的，仅此一项就会破坏您的代码。 Outlook 也只接受部分填充。

您还应该始终使用绝对路径和十六进制值，而不是电子邮件的简写。

CSS 兼容性 - https://www.campaignmonitor.com/css/

最好的办法是使用 Campaign Monitor 提供的“Bulletproof Background”。这与防弹按钮工具相结合应该可以帮助您实现目标。这些都不像他们声称的那样绝对准确，但它们至少会让你走上正确的道路。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
感谢您的提示 - 我将牢记这一点，以备将来的所有努力。

【解决方案2】：

您可以尝试在 td 标签中添加背景图片。

<td class="image-wrapper" background="header.jpg">

唯一的问题是你不会有 alt 标签。

【讨论】：