电子邮件模板 - 在中心位置带有文本叠加的背景图像
Email template - Background image with text overlay at Center location
我正在构建一个 HTML-mail，其中应该是一个图像，上面有一个数字。到目前为止，我已经将图像添加为带有嵌套 table 的 td-background 来定位文本。它在大多数电子邮件客户端中看起来都不错，除了...... Outlook。 Outlook 呈现文本 - 到顶部 (Outlook 2003) - 太高（Outlook 2007 及更高版本）
例如：Example Image
我的代码是：
<table width="100%" height="280" border="0" cellspacing="0" cellpadding="0"> <tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" valign="middle">
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td background="https://i.ibb.co/1ztK68Q/banner2.jpg"
bgcolor="#ffffff" valign="middle" height="280" class="bg"
style="background-size:cover !important; -webkit-background-size:cover !important; background-repeat:none;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px; height: 360px">
<v:fill type="frame" src="https://i.ibb.co/1ztK68Q/banner2.jpg" color="#0a4a5e" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td>
<table width="100%" height="280" border="0"
cellspacing="0" cellpadding="0"
align="center" valign="middle">
<tr>
<td class="h1 m-h1 center pb25"
style="color:#ffffff; font-family:'Encode Sans', Arial,sans-serif; font-size:28px; font-weight:800; line-height:46px; text-align:center; vertical-align: middle;">
<a href="#" style="font-family:'Poppins', Arial,sans-serif; font-size:14px;line-height:17px; text-align:left; color:#000000; font-weight:700; text-decoration:none;"><img src="https://i.ibb.co/LgTBmqp/play.png"
width="64" height="64"
border="0" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td> </tr> </table>
查看 Outlook 输出图像：See Outlook Output image
尝试将插图从 <v:textbox inset="0,0,0,0"> 更改为 <v:textbox inset="0,140px,0,0">- 取决于您的设置方式，它应该像边距一样工作（除了他们混淆了哪个是哪个 - 第二个值是 inset-top).
您还需要将 Outlook 条件中的值更改为 pt 而不是 px。要进行转换，请乘以 0.75（尽管您的起始值太高了 - 看起来像是为 600 像素的整体宽度设计的，所以从那里开始）。
我可能删除了多余的 table 但除此之外我认为这是唯一的更改。
这个效果很好：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no"><!-- Disable telephone linking in iOS -->
<title></title>
</head>
<body style="margin: 0px; padding: 0px; min-width: 100%;">
<div id="wrapper"><center style="width: 100%; table-layout: fixed; -ms-text-size-adjust: 100%; background-color: rgb(236, 81, 37); -webkit-text-size-adjust: 100%;"><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" bgcolor="#ec5125" ><tr><td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" ><![endif]-->
<div class="webkit" style="max-width: 600px;"><!--[if (gte mso 9)|(IE)]>
<table role="presentation" width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family: Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table align="center" style="font-family:Arial, sans-serif;color:#333333;font-size:16px;margin:0 auto;width:100%;max-width:600px;" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td valign="middle" bgcolor="#ffffff">
<div>
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="600" height="280" class="bg" background="https://i.ibb.co/1ztK68Q/banner2.jpg" valign="middle" style="background-size: cover; -webkit-background-size: cover;width:100%;height:auto;" bgcolor="#ffffff"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:450pt;height:210pt"><v:fill type="frame" src="https://i.ibb.co/1ztK68Q/banner2.jpg" color="#0a4a5e" /><v:textbox inset="0,140px,0,0"><![endif]-->
<div>
<table width="100%" height="280" align="center" border="0" cellspacing="0" cellpadding="0" valign="middle">
<tbody>
<tr>
<td class="h1 m-h1 center pb25" style='text-align: center; color: rgb(255, 255, 255); line-height: 46px; font-family: "Encode Sans", Arial,sans-serif; font-size: 28px; font-weight: 800; vertical-align: middle;'><a style='text-align: left; color: rgb(0, 0, 0); line-height: 17px; font-family: "Poppins", Arial,sans-serif; font-size: 14px; font-weight: 700; text-decoration: none;' href="#"><img width="64" height="64" alt="" src="https://i.ibb.co/LgTBmqp/play.png" border="0"></a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--><!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></div>
</center></div>
</body>
</html>
我正在构建一个 HTML-mail，其中应该是一个图像，上面有一个数字。到目前为止，我已经将图像添加为带有嵌套 table 的 td-background 来定位文本。它在大多数电子邮件客户端中看起来都不错，除了...... Outlook。 Outlook 呈现文本 - 到顶部 (Outlook 2003) - 太高（Outlook 2007 及更高版本）
例如：Example Image
我的代码是：
<table width="100%" height="280" border="0" cellspacing="0" cellpadding="0"> <tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" valign="middle">
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td background="https://i.ibb.co/1ztK68Q/banner2.jpg"
bgcolor="#ffffff" valign="middle" height="280" class="bg"
style="background-size:cover !important; -webkit-background-size:cover !important; background-repeat:none;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px; height: 360px">
<v:fill type="frame" src="https://i.ibb.co/1ztK68Q/banner2.jpg" color="#0a4a5e" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td>
<table width="100%" height="280" border="0"
cellspacing="0" cellpadding="0"
align="center" valign="middle">
<tr>
<td class="h1 m-h1 center pb25"
style="color:#ffffff; font-family:'Encode Sans', Arial,sans-serif; font-size:28px; font-weight:800; line-height:46px; text-align:center; vertical-align: middle;">
<a href="#" style="font-family:'Poppins', Arial,sans-serif; font-size:14px;line-height:17px; text-align:left; color:#000000; font-weight:700; text-decoration:none;"><img src="https://i.ibb.co/LgTBmqp/play.png"
width="64" height="64"
border="0" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td> </tr> </table>
查看 Outlook 输出图像：See Outlook Output image
尝试将插图从 <v:textbox inset="0,0,0,0"> 更改为 <v:textbox inset="0,140px,0,0">- 取决于您的设置方式，它应该像边距一样工作（除了他们混淆了哪个是哪个 - 第二个值是 inset-top).
您还需要将 Outlook 条件中的值更改为 pt 而不是 px。要进行转换，请乘以 0.75（尽管您的起始值太高了 - 看起来像是为 600 像素的整体宽度设计的，所以从那里开始）。
我可能删除了多余的 table 但除此之外我认为这是唯一的更改。
这个效果很好：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no"><!-- Disable telephone linking in iOS -->
<title></title>
</head>
<body style="margin: 0px; padding: 0px; min-width: 100%;">
<div id="wrapper"><center style="width: 100%; table-layout: fixed; -ms-text-size-adjust: 100%; background-color: rgb(236, 81, 37); -webkit-text-size-adjust: 100%;"><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" bgcolor="#ec5125" ><tr><td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" ><![endif]-->
<div class="webkit" style="max-width: 600px;"><!--[if (gte mso 9)|(IE)]>
<table role="presentation" width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family: Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table align="center" style="font-family:Arial, sans-serif;color:#333333;font-size:16px;margin:0 auto;width:100%;max-width:600px;" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td valign="middle" bgcolor="#ffffff">
<div>
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="600" height="280" class="bg" background="https://i.ibb.co/1ztK68Q/banner2.jpg" valign="middle" style="background-size: cover; -webkit-background-size: cover;width:100%;height:auto;" bgcolor="#ffffff"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:450pt;height:210pt"><v:fill type="frame" src="https://i.ibb.co/1ztK68Q/banner2.jpg" color="#0a4a5e" /><v:textbox inset="0,140px,0,0"><![endif]-->
<div>
<table width="100%" height="280" align="center" border="0" cellspacing="0" cellpadding="0" valign="middle">
<tbody>
<tr>
<td class="h1 m-h1 center pb25" style='text-align: center; color: rgb(255, 255, 255); line-height: 46px; font-family: "Encode Sans", Arial,sans-serif; font-size: 28px; font-weight: 800; vertical-align: middle;'><a style='text-align: left; color: rgb(0, 0, 0); line-height: 17px; font-family: "Poppins", Arial,sans-serif; font-size: 14px; font-weight: 700; text-decoration: none;' href="#"><img width="64" height="64" alt="" src="https://i.ibb.co/LgTBmqp/play.png" border="0"></a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--><!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></div>
</center></div>
</body>
</html>