文本覆盖图像的HTML/CSS-电子邮件

2022-04-05 00:00:00 html-email html css

我正在尝试将文本放在图像上,但Google似乎正在剥离我的<style>标记?

我希望图像显示在左侧,并且在右侧的图像上有两个文本块(一个高一个低) 从视觉上看,它看起来是对的,但当我把它的渲染图像发送到我的Gmail账户时,然后在图像文本a和文本b下方,去掉了样式。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
<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;">&nbsp;</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显示(也应该内联这些情况的代码)。

相关文章