时间戳

首页 > 解决方案 > 如何在电子邮件模板中显示重叠的多个图像？

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

问题描述

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

这是我得到的：

在此处输入图像描述

我想得到什么：

在此处输入图像描述

标签： htmlemailhtml-tablehtml-emailemail-templates

解决方案

您可以通过使用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>

这是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>

推荐阅读