Question

我很难找到一种跨电子邮件客户端的方式将图像堆叠在一起。我正在寻找适用于Outlook的东西。我也使用基础/ zurb的模糊模板语言，虽然我仍然可以写出我想要的任何html / css。

我已成功使用带有溢出的0宽度/高度容器的http://blog.gorebel.com/absolute-positioning-in-email/技巧，使其适用于所有其他电子邮件客户端，只有Outlook才是坏孩子。

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

修改

目标：https://imgur.com/a/xFq4d 正如你在这张图片上看到的那样，卡片的“标题”有两个图像：一个经典的头像作为圆形图像，同一个“头像”有一些应用过滤器，用作带有特殊圆角的背景图像

注意：我在某些电子邮件客户端上无法使用模糊滤镜/圆角，我们将有替代代码来处理那些不受支持的电子邮件客户端

我之前使用的绝对定位代码（我正在重写div以使用inky的行/列来转换代码以使用表格

<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的圆角技术，请发布您的解决方案。 border-radius:无法与Outlook 2007-2016一起使用。

绝对定位

position:无法在Outlook，Gmail或相关电子邮件程序中使用。甚至您发布有关替代方案的页面也无法在Outlook中运行。克服职位问题的最佳方法是设计一个不需要的电子邮件。

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

使用间隔符

一种替代方案是使用间隔表。这是一种可以添加空间的方法。

<!--[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中叠加图像（绝对定位）

1 个答案: