Question

我已经在电子邮件时事通讯上写了一个标题图片，它允许文字和按钮覆盖图像并且还具有响应性。在测试时，除了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; }

Answer 1

您可以尝试将背景图片添加到td标记。

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

唯一的是你没有alt标签。

Answer 2

如果我理解了这个问题，那么您的问题是内容不会显示在图片上。这是因为Outlook与您正在使用的CSS兼容。

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

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

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

您最好的选择是使用Campaign Monitor提供的“Bulletproof Background”。这与防弹按钮工具相结合应该有助于你到达那里。这些都不像他们声称的那样绝对准确，但它们至少会让你走上正确的道路。

无法将文本覆盖到Outlook的HTML电子邮件中的图像上

2 个答案: