如何在电子邮件模板中显示重叠的多个图像？答案

【问题标题】：How to show multiple images overlapping in an email template?如何在电子邮件模板中显示重叠的多个图像？
【发布时间】：2020-10-15 04:10:40
【问题描述】：

我正在尝试用文字连续显示多张个人资料图片。

这是我得到的：

我想得到什么：

【问题讨论】：

标签： html email html-table html-email email-templates

【解决方案1】：

您可以使用Faux Absolute Position 技术实现类似的效果。这是基于您的屏幕截图的示例：

<div style="font-size:0;">
    <span style="display:inline-block; max-width:96px; font-size:16px;">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
    </span>
    <span style="display:inline-block; max-width:96px; font-size:16px;">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
    </span>
    <span style="display:inline-block; max-width:96px; font-size:16px;">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
    </span>
</div>

这里是screenshots on Email on Acid。这将适用于大多数电子邮件客户端（来自 Apple Mail、Gmail、Yahoo、Outlook.com），但在不太受欢迎的客户端（如 GMX、Comcast）上会出现一些怪癖。在 Windows 上的 Outlook (2007-2019) 中，图像将显示为彼此相邻的正方形。如果我们想改善这一点，我们可以使用 VML 进行救援。这是它的样子：

<!--[if mso]>
<v:group style="width:320px; height:128px;" coordorigin="0 0" coordsize="320 128">
    <v:oval style="position:absolute; left:0; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
        <v:fill src="https://randomuser.me/api/portraits/men/1.jpg" type="frame" size="96pt,96pt" />
    </v:oval>
    <v:oval style="position:absolute; left:72pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
        <v:fill src="https://randomuser.me/api/portraits/men/2.jpg" type="frame" size="96pt,96pt" />
    </v:oval>
    <v:oval style="position:absolute; left:144pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
        <v:fill src="https://randomuser.me/api/portraits/men/3.jpg" type="frame" size="96pt,96pt" />
    </v:oval>
</v:group>
<![endif]-->

以下是混合两种解决方案的整体代码：

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to show multiple images overlapping in an email template?</title>
    <!-- https://stackoverflow.com/questions/62562869/how-to-show-multiple-images-overlapping-in-an-email-template -->
    <!--[if mso]>
    <xml>
    <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body>
    <!--[if mso]>
    <v:group style="width:320px; height:128px;" coordorigin="0 0" coordsize="320 128">
        <v:oval style="position:absolute; left:0; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
            <v:fill src="https://randomuser.me/api/portraits/men/1.jpg" type="frame" size="96pt,96pt" />
        </v:oval>
        <v:oval style="position:absolute; left:72pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
            <v:fill src="https://randomuser.me/api/portraits/men/2.jpg" type="frame" size="96pt,96pt" />
        </v:oval>
        <v:oval style="position:absolute; left:144pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">
            <v:fill src="https://randomuser.me/api/portraits/men/3.jpg" type="frame" size="96pt,96pt" />
        </v:oval>
    </v:group>
    <![endif]-->
    <!--[if !mso]><!-->
    <div style="font-size:0;">
        <span style="display:inline-block; max-width:96px; font-size:16px;">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
        </span>
        <span style="display:inline-block; max-width:96px; font-size:16px;">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
        </span>
        <span style="display:inline-block; max-width:96px; font-size:16px;">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />
        </span>
    </div>
    <!--<![endif]-->
</body>
</html>

【讨论】：

【解决方案2】：

您可以为此使用边距。

img {
  width: 64px;
  height: 64px;
  border: 4px solid white;
  border-radius: 64px;
  margin-left: -32px;
  background: transparent;
}

.imgStack {
  padding-left: 32px;
}

.imgStackText {
  font-family: Helvetica;
  position: relative;
  bottom: 28px;
}

<div class="imgStack">
<img src="https://i.ya-webdesign.com/images/avatar-png-1.png"/>
<img src="https://i.ya-webdesign.com/images/avatar-icon-png-1.png"/>
<span class="imgStackText"><strong>Male</strong> and <strong>Female</strong> are in the copy of this Email.</span>
</div>

编辑：在td 上尝试max-width

img {
  width: 64px;
  height: 64px;
  border: 4px solid white;
  border-radius: 64px;
  background: transparent;
}

.smallerCell {
  max-width: 32px;
}

.imgStackText {
  font-family: Helvetica;
  color: #035;
}

<table>
  <tr>
    <td class="smallerCell"><img src="https://i.ya-webdesign.com/images/avatar-png-1.png"/></td>
    <td class="smallerCell"><img src="https://i.ya-webdesign.com/images/avatar-icon-png-1.png"/></td>
    <td><img src="https://i.ya-webdesign.com/images/avatar-icon-png-1.png"/></td>
    <td class="imgStackText"><strong>Male</strong> and <strong>Female</strong> are in the copy of this Email.</td>
  </tr>
</table>

内联 CSS，由 Nathan 建议

<div style="padding-left:32px;" >
  <img src="https://i.ya-webdesign.com/images/avatar-png-1.png" style="width:64px;height:64px;border-width:4px;border-style:solid;border-color:white;border-radius:64px;margin-left:-32px;background-color:transparent;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;" />
  <img src="https://i.ya-webdesign.com/images/avatar-icon-png-1.png" style="width:64px;height:64px;border-width:4px;border-style:solid;border-color:white;border-radius:64px;margin-left:-32px;background-color:transparent;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;" />
  <span style="font-family:Helvetica;position:relative;bottom:28px;" ><strong>Male</strong> and <strong>Female</strong> are in the copy of this Email.</span>
</div>

【讨论】：

gmail 无法识别 margin-left .. 不知道为什么？
这很奇怪。试试margin: 0 0 0 -32px
已经尝试不工作..奇怪的是 sendgrid 显示正确的预览但是当邮件落在收件箱边距属性时没有应用
试试我添加的其他代码。在 Gmail 中似乎只有 HTML 表格有效。
Gmail 不支持负边距。 caniemail.com/features/css-margin