如何在电子邮件模板中显示重叠的多个图像？
YaS*_*ary 1 html email html-table html-email email-templates
我正在尝试用文本连续显示多个个人资料图片。
这是我得到的：
我想要得到什么：
小智 7
您可以通过使用人造绝对位置技术来实现类似的效果。Here\xe2\x80\x99s 基于您的屏幕截图的示例：
\n<div style="font-size:0;">\n <span style="display:inline-block; max-width:96px; font-size:16px;">\n <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />\n </span>\n <span style="display:inline-block; max-width:96px; font-size:16px;">\n <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />\n </span>\n <span style="display:inline-block; max-width:96px; font-size:16px;">\n <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />\n </span>\n</div>\n以下是Acid 上电子邮件的屏幕截图。这适用于大多数电子邮件客户端（Apple Mail、Gmail、Yahoo、Outlook.com），但在不太受欢迎的客户端（如 GMX、Comcast）上会出现一些奇怪的情况。在 Windows 上的 Outlook (2007-2019) 中，图像将显示为彼此相邻的正方形。如果我们想改进这一点，我们可以使用 VML 来救援。它看起来像这样：
\n<!--[if mso]>\n<v:group style="width:320px; height:128px;" coordorigin="0 0" coordsize="320 128">\n <v:oval style="position:absolute; left:0; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">\n <v:fill src="https://randomuser.me/api/portraits/men/1.jpg" type="frame" size="96pt,96pt" />\n </v:oval>\n <v:oval style="position:absolute; left:72pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">\n <v:fill src="https://randomuser.me/api/portraits/men/2.jpg" type="frame" size="96pt,96pt" />\n </v:oval>\n <v:oval style="position:absolute; left:144pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">\n <v:fill src="https://randomuser.me/api/portraits/men/3.jpg" type="frame" size="96pt,96pt" />\n </v:oval>\n</v:group>\n<![endif]-->\n这是混合两种解决方案的总体代码：
\n<!DOCTYPE html>\n<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>How to show multiple images overlapping in an email template?</title>\n <!-- /sf/ask/4379400861/ -->\n <!--[if mso]>\n <xml>\n <o:OfficeDocumentSettings>\n <o:PixelsPerInch>96</o:PixelsPerInch>\n </o:OfficeDocumentSettings>\n </xml>\n <![endif]-->\n</head>\n<body>\n <!--[if mso]>\n <v:group style="width:320px; height:128px;" coordorigin="0 0" coordsize="320 128">\n <v:oval style="position:absolute; left:0; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">\n <v:fill src="https://randomuser.me/api/portraits/men/1.jpg" type="frame" size="96pt,96pt" />\n </v:oval>\n <v:oval style="position:absolute; left:72pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">\n <v:fill src="https://randomuser.me/api/portraits/men/2.jpg" type="frame" size="96pt,96pt" />\n </v:oval>\n <v:oval style="position:absolute; left:144pt; top:0; width:96pt; height:96pt; z-index:1;" stroked="true" strokeweight="3pt" strokecolor="#ffffff" fillcolor="#ffffff">\n <v:fill src="https://randomuser.me/api/portraits/men/3.jpg" type="frame" size="96pt,96pt" />\n </v:oval>\n </v:group>\n <![endif]-->\n <!--[if !mso]><!-->\n <div style="font-size:0;">\n <span style="display:inline-block; max-width:96px; font-size:16px;">\n <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />\n </span>\n <span style="display:inline-block; max-width:96px; font-size:16px;">\n <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />\n </span>\n <span style="display:inline-block; max-width:96px; font-size:16px;">\n <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" width="128" height="128" style="border:4px solid #fff; border-radius:50%;" />\n </span>\n </div>\n <!--<![endif]-->\n</body>\n</html>\n