email - 电子邮件中的可点击背景图片 - 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

我更改了您的代码中的一些内容，结果位于此答案的底部。

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

我还在评论中添加了一个表格，因为如果 CSS 应用不当，段落可能会使用不需要的空格(文本上方和下方)。第一行将其隔开，第二行将文本作为链接。

编辑 - 添加了以下内容:

• href到VML
• Outlook 的条件空间
• 绿色条的 span 标签
• 填充到 href 以使整个 block 可点击

<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 中呈现(2019 年 2 月)

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