如何为不同的电子邮件提供商在图像上放置动态文本？ （响应式电子邮件）
Posted
技术标签:
【中文标题】如何为不同的电子邮件提供商在图像上放置动态文本？ （响应式电子邮件）【英文标题】：How to put a dynamic text on top of an image for different email providers ? (Responsive Email) 【发布时间】：2017-12-13 05:21:13 【问题描述】：我目前正在开发一个必须与主要电子邮件提供商兼容的电子邮件模板。
根据客户的说法，我应该在图像顶部创建一个称呼段落或标题，所以我尝试了这个解决方案，它在浏览器上运行良好，但绝对不能在电子邮件上运行（在 Outlook、hotmail、gmail 和 yahoo 上测试）和这些都没有读取属性位置：absolute（我认为不确定）。
模板还必须具有响应性，因此如果我调整屏幕大小，则文本应根据屏幕宽度进行调整。 由于电子邮件的多个问题，我不得不在另一个内部创建 2 个表格，以便在图像周围创建边框，然后在内部创建第二个表格以显示图像本身。
文字应该在粉红色的路标内，它是 Hi Margaret，然后是动态的。
这是我的代码：
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="UTF-8">
<style type="text/css">
body
background: #dff1f6 !important;
font-family: Arial, sans-serif;
.preheader
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
color: transparent !important;
height: 0 !important;
width: 0 !important;
@media (max-width: 376px)
.anglianlogo
max-width: 250px !important;
.anglianwellcome
font-size: 11px !important;
.awvideopreview
height: 150px;
.mobileresize
width: 90% !important;
font-size: 9px;
</style>
<div style="background: #dff1f6;">
<!--Container-->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" > </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" >
<!--Main Table-->
<table cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; width: 100%; margin: 0 auto; background: white;">
<tr>
<td>
<!--Video-->
<table cellspacing="0" cellpadding="0" border="0" style="padding-bottom: 30px; padding-left:10%; padding-right:10%; width:100%;">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="center" style="text-align:center; margin: 0 auto;">
<tr>
<td style="padding: 0; border: 10px solid #72b8d1;">
<a style="margin: 0 auto; display: block;">
<!--href=" CustomerData.vidUrl "-->
<img class="awvideopreview" src="https://preview.ibb.co/gKOzsv/Videopreview.gif" border="0" align="center" style="width:100%;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--End Table-->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" > </td></tr>
</table>
<!--End Container-->
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：您的 CSS 类中有什么？请将您的代码放在 jsfiddle 中，以便我可以在电子邮件中对其进行测试。 用于电子邮件的 HTML 采用与通常情况不同的方法。很多表格和内联样式以及兼容性问题。
查看此链接。它可以帮助您找到一些问题。 （但现在向我们展示小提琴）
https://www.htmlemailcheck.com/
【讨论】：
嗨，伙计，我能够复制一些代码并把它放在这里，所以现在更新了。非常感谢您的帮助【参考方案2】：如果您需要覆盖副本，最好使用背景图片
https://backgrounds.cm/ 是最好的工具。只需设置尺寸，添加您的图片链接，这将为您生成 VML 代码，然后将任何覆盖的内容放在 div 中。
【讨论】：
【参考方案3】：这是我在电子邮件中使用的示例。 VML 部分负责 Outlook，而 td 中定义的背景负责其他电子邮件客户端。我在 td 上使用高度将图像保持在特定高度（可选），并且通过该类，您可以使用媒体查询来控制高度。
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background: url([IMAGE PATH]); background-image: url([IMAGE PATH]); background-color:#[BACKGROUND COLOR];" class="[YOUR CLASS]">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[WIDTH]px;height:[HEIGHT]px;">
<v:fill type="frame" src="[IMAGE PATH]" color="#[BACKGROUND COLOR]" />
<v:textbox inset="0,0,0,0">
<![endif]-->
[HTML CONTENT HERE]
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>如果这就是你想要的，请告诉我。
【讨论】：
以上是关于如何为不同的电子邮件提供商在图像上放置动态文本？ （响应式电子邮件）的主要内容，如果未能解决你的问题，请参考以下文章
如何为不受支持的客户端将 HTML 电子邮件中的 GIF 替换为不同的图像