时间戳

首页 > 解决方案 > 带有背景图片的时事通讯

css - 带有背景图片的时事通讯

问题描述

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

背景图在这里

这是迄今为止我设法编写的代码，但我找不到使 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>

标签： csshtml-tablehtml-emailnewsletter

解决方案

与电子邮件设计和开发中的所有内容一样，背景图像在电子邮件客户端中得到了混合支持。大多数客户端支持下面描述的一种技术，最显着的例外是早期版本的 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的这篇文章。

推荐阅读