Question

我正在使用防弹方法将一些文本覆盖在图像上方，因此看起来像这样：

我的代码如下（不确定为什么图片无法在摘要中呈现，将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

我在您的代码中进行了一些更改，结果在此答案的底部。

基本上，您的类型为图块（<v:fill type="tile"）。当块内的内容较大时，这将平铺图像。除非您打算将背景平铺，否则建议您坚持使用<v:fill type="frame"。

我还在注释中添加了一个表格，因为如果CSS应用不正确，段落可能会使用多余的空格（文本上方和下方）。第一行将其隔开，第二行将文本作为链接。

编辑-添加了以下内容：

href转换为VML
Outlook的条件空间
绿色条的span标签
填充到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中呈现（2019年2月）

希望这是您追求的答案。

Answer 2

Outlook客户端忽略了很多样式属性，并且没有按您期望的方式呈现表。从屏幕快照的外观看，似乎在Outlook中不遵循表格的指定高度。

我建议您尝试设置表格和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客户端。

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

2 个答案: