【问题标题】: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 RODRIGUEZarticle .

    【讨论】:

    • 为此 +1,但您将需要多个背景声明以获得支持。在 CSS 中使用 background:url()background-image:url() 以获得更广泛的支持。
    【解决方案2】:

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

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-10-09
    • 2012-01-27
    • 2014-11-05
    • 2013-11-01
    • 2017-05-05
    • 1970-01-01
    • 2020-11-17
    • 2016-02-13
    相关资源
    最近更新 更多