在 outlook 中相互叠加图像（绝对定位）

Question

我正在努力寻找一种 cross-email-client 将图像堆叠在一起的方法。我正在寻找也适用于 Outlook 的东西。我也在使用来自 foundation/zurb 的 inky 模板语言，虽然我仍然可以写任何我想要的 html/css。

我已经成功地使用了 http://blog.gorebel.com/absolute-positioning-in-email/ 0-width/height 容器溢出的技巧，使其在所有其他电子邮件客户端上工作，只有 Outlook 是坏的 child.

有没有人知道在 Outlook 中将图像（不是背景）叠加在一起的技巧？

编辑

目标：https://imgur.com/a/xFq4d 正如你在这张图片上看到的，卡片的 "header" 有两张图片：一张经典头像作为圆形图片，同样的 "avatar" 应用了一些滤镜并用作背景图片，带有特殊的圆角

注意：我很模糊 filters/round 角落在某些电子邮件客户端上不可用，我们将有替代代码来处理那些不受支持的电子邮件客户端

我之前使用的绝对定位代码（我正在重写 div 以使用 inky 的 rows/columns 将代码转换为使用表格

<div class="professional-card">
    <div class="header">
        <div class="absolute-wrapper">
            <div class="avatar-background-wrapper absolute-in-wrapper">
                <%= avatar_img(class: 'avatar-background') %>
            </div>
        </div>
        <div class="absolute-wrapper">
            <div class="avatar employee %> absolute-in-wrapper">
                <%= avatar_img %>
                <div class="firstname">
                    <%= model.user.first_name %>
                </div>
                <div class="company-name">
                    <%= model.company_name %>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="absolute-wrapper">
            <div class="absolute-in-wrapper">
                <div class="position">
                    <%= model.position %>
                </div>
                <ul class="tags">
                    <%= tags %>
                </ul>
            </div>
        </div>
        <div class="absolute-wrapper">
            <div class="absolute-in-wrapper">
                <div class="company-logo">
                    <%= logo_img %>
                </div>
            </div>
        </div>
    </div>
</div>

提到的技巧对应的绝对定位SCSS代码（在消息中自动内联）

.absolute-in-wrapper {
    display: inline-block;
}

.absolute-wrapper {
    max-height: 0;
    max-width: 0;
    overflow: visible;
}

Answer 1

让背景图像在 Outlook 中工作的唯一方法是使用 VML。

<div style="background-color:#ff0000; width:600px;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
  <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
  </v:background>
  <![endif]-->
  <table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
        <h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
          Background Image with text on top
        </h1>
      </td>
    </tr>
  </table>
</div>

您可以在 https://backgrounds.cm 找到大部分代码。

https://jsfiddle.net/wallyglenn/7zLaLrfx/

圆角

如果您有 Outlook 的圆角技术，请 post 您的解决方案。 border-radius: 不适用于 Outlook 2007-2016。

绝对定位

position: 在 Outlook、Gmail 或相关电子邮件程序中不起作用。甚至您 post 了解备选方案的页面在 Outlook 中也不起作用。克服职位问题的最佳方法是设计一个不需要的电子邮件。

https://www.campaignmonitor.com/css/positioning-display/position/

使用垫片

一种替代方法是使用 spacer 表。这是您可以添加 space.

的一种方式

<!--[if (gte mso 9)|(IE)]>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="8" style="padding: 0; mso-line-height-rule: exactly; line-height: 2px; font-size: 0;">
      &nbsp;
    </td>
  </tr>
</table>
<![endif]-->

祝你好运。

在 outlook 中相互叠加图像（绝对定位）

Overlay images on one another in outlook (absolute positioning)

html

css

email

outlook

zurb-foundation