使用VML将背景图像应用于表格单元格

时间:2014-01-22 19:00:57

标签: html email html-email vml

我正在尝试将重复背景应用于html电子邮件的表格单元格,我正在使用http://backgrounds.cm/中的代码

这是我的TD和包装器VML:

<td background="http://domain.com/Portals/0/emails/images/stripes-middle.png" bgcolor="#00ff00" width="346" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:346px;">
    <v:fill type="tile" src="http://domain.com/Portals/0/emails/images/stripes-middle.png" color="#ff0000" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <div>
      <p>LOTS OF CONTENT IN HERE</p>                                                                
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

但是,它会将我的背景图像渲染到父表的左上角!不在表格单元格内。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

为什么不将它嵌套在另一个表中呢?

<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
    <td align="center" valign="top">
        <table border="0" cellpadding="0" cellspacing="0" width="346" style="border-collapse:collapse; padding:0; margin:0px;">
            <tr valign="top">
                <td background="http://domain.com/Portals/0/emails/images/stripes-middle.png" bgcolor="#ff0000" width="346" height="112" valign="top">
                    <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"   style="width:346px;height:112;">
                    <v:fill type="tile" src="http://domain.com/Portals/0/emails/images/stripes-middle.png" color="#ff0000" />
                    <v:textbox inset="0,0,0,0">
                    <![endif]-->
                    <div>
                        <table border="0" cellpadding="0" cellspacing="0" width="346" style="border-collapse:collapse; padding:0; margin:0px;">
                            <tr valign="top">
                                <td align="left" valign="top">
                                    <p>LOTS OF CONTENT IN HERE</p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

无法准确指出你出错的地方,但我之前从未使用过合适的形状到文本,这个片段并没有让我错误。