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