Outlook 时事通讯背景图像和文本答案

【问题标题】：Outlook newsletter background image and textOutlook 时事通讯背景图像和文本
【发布时间】：2014-11-05 07:32:58
【问题描述】：

我在时事通讯中向 TD 添加文本和背景图像时遇到了一些困难，在我用来显示它们的代码下方。背景可见，但文字未显示。

       {if !empty($aModules.mkNews)}
            {foreach name=mkNews from=$aModules.mkNews item=mkNews}
                 <td width="230" style="background:url(http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}) no-repeat center center; text-align: center; font-size: 14px; color: white; font-family:verdana; padding: 20px 0; line-height:22px;">
                     <table background="http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}" width="230" height="230">
                         <tr>
                             <td style="text-align: center; font-size: 14px; color: white; font-family:verdana; padding: 20px 0; line-height:22px;">
                             <!--[if gte mso 9]>
                             <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; height:230px; width:230px; border:0; z-index:1;' src="http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}"/>
                             <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:230px; width:230px; top:0; left:0; border:0; z-index:2;'>
                             <![endif]-->
                             {$mkNews.message}
                             <!--[if gte mso 9]>
                             </v:shape>
                             <![endif]-->
                             </td>
                         </tr>
                     </table>
                 </td>
             {/foreach}
         {/if}

谁能指出我正确的方向？我对 Outlook 使用的 v-tags 没有太多经验。

提前致谢！

【问题讨论】：

标签： html html-email outlook-2010 newsletter

【解决方案1】：

Outlook 2007 和 2010 不支持背景图片。请查看Campaign Mointor 以获得 CSS 支持。

虽然上述情况适用于 CSS，但 Campaign Monitor 提到了一个与您尝试的解决方案类似的解决方案。他们使用不同的元素，尝试

<td bgcolor="#DDDDDD" style="background-image: url('http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}');" background="http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}" width="230" height="230" valign="top">
    <!--[if gte mso 9]>
       <v:rect style="height:230px; width:230px;border:0;" strokecolor="none">
          <v:fill type="tile" color="#DDDDDD" src="http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}" /></v:fill>
       </v:rect>
       <v:shape id="theText" style="position:absolute;width:230px;height:230px;">
       <![endif]-->
    <p>If you can see this over the image, background images are successful.</p>
    <!--[if gte mso 9]>
       </v:shape>
    <![endif]-->
</td>

我已将大小和 URL 更改为您想要的大小和 src。

他们还将xmlns:v="urn:schemas-microsoft-com:vml 部分添加到<html> 标签而不是v 标签。

<html xmlns:v="urn:schemas-microsoft-com:vml>

我没有可以在其中测试它的 Outlook。

【讨论】：

背景图片在 Outlook 2010 中可以工作，只有文本不可见。
你看过this? - 他们似乎没有使用v:image，但类似v:rect和v:fill元素。

【解决方案2】：

谢谢你的帮助，我想通了。

以下代码有效，文字可见。

    <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; height:230px; width:230px; border:0; z-index:1;' src="http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}"/>
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:230px; width:230px; top:-20px; left:0; border:0; z-index:2;'>
        <![endif]-->
        <table width="230" height="230" border="0" cellspacing="0" cellpadding="0">
            <tr height="230">
                <td width="230" style="text-align: center; font-size: 14px; color: white; font-family:verdana; line-height:22px;">{$mkNews.message|convertEncoding:'utf8_decode'|regex_replace:"/[\ï»¿]/":""}</td>
            </tr>
        </table>
        <!--[if gte mso 9]>
        </v:shape>
        <![endif]-->

文本应该在一个额外的表格中，然后在 Outlook 2010 中可见。

【讨论】：