文本覆盖图像的HTML/CSS-电子邮件
我正在尝试将文本放在图像上，但Google似乎正在剥离我的<style>标记？
<style>
.container {
position: relative;
}
.text-blocka {
position: absolute;
top: 0px;
right: 10px;
left: 200px;
text-align: right;
color: #044C56;
font-size: 32px;
font-weight: bold;
font-family: Arial;
line-height: 150%;
}
.text-blockb {
position: absolute;
bottom: 20px;
right: 20px;
color: black;
padding-left: 100px;
padding-right: 20px;
text-align: right;
font-size: 24px;
line-height: 120%;
}
</style>
<div class="container">
<img src="http://image.insights.invitae.com/lib/fe4215707564067f741774/m/1/8a2d8efe-96c0-4ad1-8a7c-2f7630a37dd4.png" alt="Test" style="width:50%;">
<p class="text-blocka">Waiting for your Results? <br>They will be ready soon!
</p>
<p class="text-blockb">
In the meantime, log in to <br>your portal account to:
</p>
</div>解决方案
Position is not well supported in emails，所以您必须执行其他操作。
基本上，你需要学习https://backgrounds.cm/"防弹背景图片"，但我自己从来没能做到这一点--但这是一个跨电子邮件兼容的东西的开始(值得注意的是，对于Outlook桌面也是如此)。它是几年前建造的，所以有点过时了。要使用Outlook，我必须在<v:fill.../>(HT：Jason Meeker，https://litmus.com/community/discussions/4931-using-retina-images-as-background-images)中将type="tile"更改为type="frame")
我想出了一种响应式背景图像方法--您需要针对您的特定图像调整它，并将您使用的图像宽度更改为容器的宽度(这里为600px)
<!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>
<!-- START HEAD v1-->
<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" />
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">
.text-blocka {
text-align: right;
color: #044c56;
font-size: 32px;
font-weight: bold;
font-family: Arial;
line-height: 150%;
}
.text-blockb {
color: white;
padding-left: 100px;
padding-right: 20px;
text-align: right;
font-size: 24px;
line-height: 120%;
}
@media screen and (max-width: 620px) {
.responsive {
width: 100vw !important;
height: auto !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.spacer {
margin-bottom: 150px !important;
}
.text-blocka {
font-size: 24px;
}
.text-blockb {
font-size: 18px;
}
}
@media screen and (max-width: 420px) {
.spacer {
margin-bottom: 50px !important;
}
.text-blocka {
font-size: 20px;
}
.text-blockb {
font-size: 16px;
}
}
</style>
</head>
<!-- END HEAD -->
<body style="margin: 0; padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0; min-width: 100%; background-color: #ffffff;">
<!-- START OUTER WRAPPER -->
<center class="wrapper" style="width: 100%; table-layout: fixed; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
<div class="webkit" style="max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table 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
class="outer"
align="center"
style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; font-family: Arial, sans-serif; color: #333333; margin: 0 auto; width: 100%; max-width: 600px;"
>
<!-- END OUTER WRAPPER -->
<td class="responsive" background="https://picsum.photos/id/237/600/500" bgcolor="#7bceeb" width="600" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="frame" src="https://picsum.photos/id/237/600/500" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<p class="text-blocka">
Waiting for your Results? <br />
They will be ready soon!
</p>
<p class="spacer" style="margin: 0 0 200px 0;"> </p>
<p class="text-blockb">
In the meantime, log in to <br />
your portal account to:
</p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
<!-- START OUTER WRAPPER -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
<!-- END OUTER WRAPPER -->
</body>
</html>
间隔类对页边距的作用是帮助填充<td>的高度。背景填充<td>，因此它需要有一定的高度(取决于图像和内容)。然后，当我们进入手机领域时，我添加了断点来向下调整高度，不需要这么高。您需要尝试才能获得最佳结果。
也许有人有一种更简单的方法--但我非常确定他们的方法不会适用于所有大多数电子邮件客户端。这款手机已经过测试，可与Apple Mail；Outlook 2010、2019(Windows)；Gmail Android；Gmail iOS；iPhone 11；Outlook Android&；iOS；Samsung Mail Android；Gmail on Chrome；Outlook.com on Explorer；Yahoo on Firefox配合使用。
然而，在Android上的Gmail IMAP和其他几个较少使用的IMAP中，都不起作用，在这种情况下，后备颜色#7bceeb显示(也应该内联这些情况的代码)。
相关文章