带有背景图片的时事通讯答案

【问题标题】：Newsletter with a background image带有背景图片的时事通讯
【发布时间】：2019-01-21 09:25:39
【问题描述】：

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

背景图片为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>

【问题讨论】：

标签： css html-table html-email newsletter

【解决方案1】：

就像电子邮件设计和开发中的所有内容一样，背景图片跨电子邮件客户端的混合支持。大多数客户支持一个下面描述的技术，最值得注意的排除是早期版本的 Android、某些 Gmail 客户端和某些 webmail 客户端，根据使用的浏览器而有很大差异用过。

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

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

【讨论】：

为此 +1，但您将需要多个背景声明以获得支持。在 CSS 中使用 background:url() 和 background-image:url() 以获得更广泛的支持。

【解决方案2】：

将课程添加到您的表中。然后在 CSS 文件中使用这样的代码 .class{background-image:URL(/image.png) no-repeat;}

【讨论】：

outlook不支持
Android 不支持。 - campaignmonitor.com/css/color-background/background-image