Question

我想创建一个带有背景图像/框架的新闻通讯，我想知道这样做的最佳方法是什么。如果您有任何建议，请分享。

背景图片为here

到目前为止，这是我设法编写的代码，但是我找不到使td居中的方法，而且还必须在图像文本和徽标的顶部添加内容。可能吗？如果可以，它是否与大多数电子邮件客户端（例如Outlook或gmail）兼容？

<html>

<head>
  <title></title>
</head>

<body>

  <div style="background-color:#ffffff;">
    <!--[if gte mso 9]>
      <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
        <v:fill type="tile" src="https://i.imgur.com/xRYqx1Y.png" color="#7bceeb"/>
      </v:background>
      <![endif]-->
    <table align='middle' height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" repeat="none">
      <tr>
        <td align='middle' valign="middle" style="background-repeat: no-repeat; text-align: center;" background="https://i.imgur.com/xRYqx1Y.png">
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

Answer 1

就像电子邮件设计和开发中的所有内容一样，背景图片跨电子邮件客户端提供了多种支持。大多数客户支持下述技术，最值得注意的排除是早期版本的Android，一些Gmail客户端以及一些网络邮件客户端，具体取决于使用哪种浏览器使用。

我们可以通过使用防弹背景来获得更接近的结果

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td background="https://i.stack.imgur.com/qNm7c.png" bgcolor="#7bceeb" valign="top">
      <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
            <v:fill type="tile" src="https://i.stack.imgur.com/qNm7c.png" color="#7bceeb" />
            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
          <![endif]-->
      <div>
        test
      </div>
      <!--[if gte mso 9]>
            </v:textbox>
          </v:rect>
          <![endif]-->
    </td>
  </tr>
</table>

但是即使如此，我们在某些主要客户（例如 Gmail Chrome ）中仍存在局限性，有关更多详细信息，请阅读 JASON RODRIGUEZ的article em>。

Answer 2

将类添加到表中。然后在CSS文件中使用如下代码 .class {background-image：URL（/image.png）不重复；}

带有背景图片的时事通讯

2 个答案: