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

标签 css html-table html-email newsletter

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

背景图片是here

这是我到目前为止编写的代码,但我找不到使 td 居中的方法,而且我还必须在图像文本和 Logo 的顶部添加。这可能吗?如果可能的话,它是否与大多数使用的电子邮件客户端(如 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>

最佳答案

Like everything in email design and development, background images have mixed support across email clients. Most clients support one techniques described below, the most notable exclusions being earlier versions of Android, some Gmail clients, and some of the webmail clients, which vary greatly depending on which browser is used.

使用防弹背景可以让我们更接近

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td background="/image/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="/image/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)中仍存在限制,如需了解更多详细信息,请阅读此文章 article来自JASON RODRIGUEZ

关于css - 带有背景图片的时事通讯,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51842810/

相关文章:

javascript - 拖放 html 元素或编辑器

html - 删除 Outlook 2010 中的表格单元格间距

jquery - 我们如何将 X 和 Y 轴移动到气泡图中的中心 (JQPlot)

css 覆盖 Magefan BLOG 的 ULTIMO 主题 - magento 2.2.1

javascript - 为什么单击按钮在我的 Javascript-html 中不起作用?

html - 从模型 AngularJS 创建表

html - css 图像叠加(缩放图标)

css - 有没有比 @if() 更好的方法在 razor 中动态添加 css

jquery - 如果一行中只有一个可见的表格单元格,如何动态添加 .attr ('colspan' , '100' )?

php - 使用 PHP mail() 发送多部分/替代