html - 背景属性在电子邮件模板的 Html 表标记中不起作用

Question

注意: 电子邮件模板在浏览器中工作正常，当在 outlook 窗口中附加电子邮件模板时，img src 属性图像得到显示，但下面的代码不起作用。

今天我在 html 和 css 中遇到了一个电子邮件模板的问题，我已经从 outlook 发送了邮件模板，但是 backgroud:url("https://image.flaticon.com/teams/new/1-freepik.jpg ") 在表格中。

这是下面的一段代码有问题。

我试过在表格标签中插入图片，静态图片不显示。

方法一:

<table background="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-size:cover;" height="380">    

方法二:

<table  class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;" height="380"> 

方法三:

<table  class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image:https://image.flaticon.com/teams/new/1-freepik.jpg; background-size:cover;" height="380">    

没有效果期望 img src="tag"

Answer 1

电子邮件模板很棘手。我建议您将背景图片添加到 TD 标签而不是表格，如下所示:

<table  class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" height="380"> 
  <tr>
    <td style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;"></td>
  </tr>
</table>

在 TD 中添加另一个表格，其中包含模板的其余内容。

<table  class="ban-hei" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" height="380"> 
  <tr>
    <td style="background:url(https://image.flaticon.com/teams/new/1-freepik.jpg); background-size:cover;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>Email content in here </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

如果出于某种原因，这对您不起作用，我建议您访问 backgrounds.cm并查看他们的 v:fill 代码，用于表格中的背景图像，看起来像这样:

<td background="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" bgcolor="#7bceeb" width="225" height="225" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:225px;height:225px;">
    <v:fill type="tile" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR32QTbkvVrRO2yxIKRhT9aN0xj7otdnQetREdz2RVG0AVk3hcP" color="#7bceeb" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>