电子邮件中的可点击背景图片 - Outlook 问题

Question

我正在使用 bulletproof 方法在图像上叠加一些文本，所以它看起来像这样：

我的代码如下（不确定为什么图像不能在片段中呈现，将 html 代码粘贴到浏览器中它会显示）：

<table>
    <tr>
        <td class="ppp-ideabooks__image" background="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" bgcolor="#fff" style="width: 340px; height: 198px; vertical-align: bottom; padding: 0;">
           <!--[if gte mso 9]>
           <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:340px;height:198px;">
              <v:fill type="tile" src="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" color="#fff" />
              <v:textbox inset="0,0,0,0">
                 <![endif]--> <a class="ppp-ideabooks__link" href="#" style="display: block; width: 100%; height: 90%;"></a>
                 <p class="ppp-ideabooks__text" style="display: inline-block; margin: 0; padding: 5px 12px; background-color: #4dbc15; color: #000; letter-spacing: 1px; font-size: 15px; font-family: HelveticaNeueMedium,HelveticaNeue-Medium,'Helvetica Neue Medium',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;">
                    "COOL CARS"
                 </p>
                 <!--[if gte mso 9]>
              </v:textbox>
           </v:rect>
           <![endif]-->
        </td>
    </tr>
</table>

这工作正常，但在 Outlook 上看起来像这样：

有谁知道如何解决 Outlook 的这个问题？请注意，我试图使图像可点击，这就是为什么我在里面也有 <a> 标签...

谢谢！

Answer 1

Outlook 客户端忽略了很多样式属性，并且 tables 有时没有按照您期望的方式呈现。从您的屏幕截图来看，table 的指定高度似乎在 Outlook 中不受尊重。

我建议您尝试将宽度和高度设置为 table 和 td 属性。

<table width="340" height="198" cellpadding="0" cellspacing="0">
<tr>
    <td background="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" width="340" height="198" style="width: 340px; height: 198px; vertical-align: bottom; padding: 0;">
       <!--[if gte mso 9]>
       <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:340px;height:198px;">
          <v:fill type="tile" src="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" color="#fff" />
          <v:textbox inset="0,0,0,0">
             <![endif]--> <a href="#" style="display: block; width: 100%; height: 90%;"></a>
             <p class="ppp-ideabooks__text" style="display: inline-block; margin: 0; padding: 5px 12px; background-color: #4dbc15; color: #000; letter-spacing: 1px; font-size: 15px; font-family: HelveticaNeueMedium,HelveticaNeue-Medium,'Helvetica Neue Medium',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;">
                "COOL CARS"
             </p>
             <!--[if gte mso 9]>
          </v:textbox>
       </v:rect>
       <![endif]-->
    </td>
</tr>

我猜你的代码段中的图像没有显示，因为它是通过 http 提供的。如果片段包含邮件的全部 html 内容，请考虑向其添加 html、header 和 body 标签以提高送达率。

以下示例未经测试，因为我目前无法访问 Outlook 客户端。

Answer 2

我在你的代码中做了一些改动，结果在这个答案的底部。

基本上你的类型是 tile (<v:fill type="tile")。当块内的内容较大时，这将平铺图像。除非你有一个要平铺的背景，否则你建议坚持 <v:fill type="frame".

我还在评论中添加了一个 table，因为如果 CSS 应用不当，段落可能会使用不需要的 space（文本上方和下方）。第一行是 space 出来，第二行的文本是 link.

编辑 - 添加了以下内容：

href 到 VML
有条件 space 展望
绿色条的跨度标签
填充到 href 以使整个块可点击

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="top" class="ppp-ideabooks__image" background="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" bgcolor="#fff" style="width: 340px; height: 198px; padding: 0;vertical-align: top;">
           <!--[if gte mso 9]>
           <v:rect xmlns:v="urn:schemas-microsoft-com:vml" href="http://www.google.com" fill="true" stroke="false" style="width:340px;height:198px;">
              <v:fill type="frame" src="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" color="#fff" />
              <v:textbox inset="0,0,0,0">
                 <![endif]--> 
            
                <table border="0" cellpadding="0" cellspacing="0">
                    <!--[if gte mso 9]>
                    <tr>
                        <td style="height:171px;"></td>
                    </tr>
                    <![endif]-->
                    <tr>
                        <td class="ppp-ideabooks__text" style=""><a class="ppp-ideabooks__link" href="#" style="display: inline-block;box-sizing: border-box; cursor: pointer; text-decoration: none;padding: 170px 204px 0px 0px;">
                         
                            <span style="display: inline-block; margin: 0; padding: 5px 12px; background-color: #4dbc15; color: #000; letter-spacing: 1px; font-size: 15px; font-family: HelveticaNeueMedium,HelveticaNeue-Medium,'Helvetica Neue Medium',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;">"COOL CARS"</span></a>
                         </td>
                    </tr>
            </table>
                 <!--[if gte mso 9]>
              </v:textbox>
           </v:rect>
           <![endif]-->
        </td>
    </tr>
</table>

以上代码在 Litmus 中的呈现方式 (Feb/2019)

希望这就是您想要的答案。

电子邮件中的可点击背景图片 - Outlook 问题

Clickable background image in email - Outlook issue

email

html-email