将图像定位在电子邮件模板中的另一个图像上方

Question

如何在任何电子邮件模板中定位元素。在设计中，我必须将图像放在另一个上，这可能只有将其定位为绝对值或给它一个余量。 据我所知，谷歌不支持任何元素的边距和定位样式。 有没有其他方法可以解决这个问题..

目前它看起来像这样

预期产出

Answer 1

最常用的电子邮件客户端不支持position css属性。 Reference

我可以向你推荐两种选择。

• 将较大的图像作为父元素的背景，并将另一个图像放在子<img>标记中。并使用width，height＆amp;父元素和子元素的float属性。

  <div style="background: url(...);">
      <img src="..."/>
  </div>
  

• 或者，如果这些图片对于所有电子邮件都是相同的，那么创建一个合并这两个图像的合成图像。

Answer 2

对于封面照片的使用background-image和用户照片的使用img，请将img放在封面照片中，并为其添加一个上部偏移量，div以上img。< / p>

工作实例 http://codepen.io/anon/pen/oXZXmp

CSS

.container {
  background: red;
  margin: auto;
  width: 600px;
  height: 300px;
  background: #ddd;
}
header {
  padding: 20px;
  height: 140px;
  background: url(https://static.pexels.com/photos/489/dawn-nature-sunset-night.jpg) center top;
  background-size: cover;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #fff;
  border: none;
}
.offset {
  width: 100%;
  height: 100px;
}

HTML

<div class="container">
  <header>
    <div class="offset"></div>
    <img src="http://api.adorable.io/avatars/100/abott@adorable.io.png" class="thumbnail" alt="user photo">
  </header>
</div>