Html 如何为不同的电子邮件提供商在图像上添加动态文本？（回复电子邮件）
我目前正在开发一个电子邮件模板，该模板必须与主要的电子邮件提供商兼容 根据客户的要求，我应该在图像顶部创建一个问候段落或标题，所以我尝试了这个解决方案，它在浏览器上运行良好，但在电子邮件上绝对不行（在Outlook、hotmail、gmail和yahoo上测试过），并且没有一个读到属性position:absolute（我想不确定） 模板也必须是响应的，所以如果我调整屏幕的大小，文本应该根据屏幕的宽度进行调整。 由于电子邮件中存在多个问题，我不得不创建两个表，一个在另一个表中，以便在图像周围创建边框，然后在其中创建第二个表来显示图像本身 文本应该在粉红色的路标内，是“嗨，玛格丽特”，然后是动态的 这是我的密码：Html 如何为不同的电子邮件提供商在图像上添加动态文本？（回复电子邮件）,html,css,html-table,html-email,responsive,Html,Css,Html Table,Html Email,Responsive,我目前正在开发一个电子邮件模板，该模板必须与主要的电子邮件提供商兼容 根据客户的要求，我应该在图像顶部创建一个问候段落或标题，所以我尝试了这个解决方案，它在浏览器上运行良好，但在电子邮件上绝对不行（在Outlook、hotmail、gmail和yahoo上测试过），并且没有一个读到属性position:absolute（我想不确定） 模板也必须是响应的，所以如果我调整屏幕的大小，文本应该根据屏幕的宽度进行调整。 由于电子邮件中存在多个问题，我不得不创建两个表，一个在另一个表中，以便在图像周围创建
<!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>
身体{
背景：#dff1f6！重要；
字体系列：Arial，无衬线；
}
.预热头{
显示：无！重要；
可见性：隐藏！重要；
不透明度：0！重要；
颜色：透明！重要；
高度：0！重要；
宽度：0！重要；
}
@介质（最大宽度：376px）{
.Anglian标志{
最大宽度：250px！重要；
}
安格利安韦尔康先生{
字体大小：11px！重要；
}
.AW视频预览{
高度：150像素；
}
.手机大小{
宽度：90%！重要；
字体大小：9px；
}
}
您的CSS类中有哪些内容？请将代码放在JSFIDLE中，以便我可以在电子邮件中测试它。 用于电子邮件的HTML采用了与普通邮件不同的方法。许多表和内联样式以及兼容性问题 签出此链接。它可以帮助你发现一些问题。（但现在让我们看看小提琴）
您的CSS类中有哪些内容？请将代码放在JSFIDLE中，以便我可以在电子邮件中测试它。 用于电子邮件的HTML采用了与普通邮件不同的方法。许多表和内联样式以及兼容性问题 签出此链接。它可以帮助你发现一些问题。（但现在让我们看看小提琴）
如果需要覆盖副本，最好使用背景图像
这是最好的工具。只需设置尺寸，添加图像链接，这将为您生成VML代码，然后将任何覆盖内容放置在
div这是最好的工具。只需设置尺寸，添加图像链接，这将为您生成VML代码，然后将任何覆盖内容放置在
div
[此处为HTML内容]
[此处为HTML内容]
<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;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="600">
<!--Main Table-->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; width: 100%; margin: 0 auto; background: white;">
<tr>
<td>
<!--Video-->
<table width="600" 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" width="450" 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;" height="20"> </td></tr>
</table>
<!--End Container-->
</div>
</body>
</html>