Question

我在简报中向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-tag没有多少经验。

提前致谢！

Answer 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>

我已将大小和网址更改为您想要的尺寸和src。

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

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

我没有Outlook可以测试它。

Answer 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中可见。

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

2 个答案: