在电子邮件模板中将一张图片定位在另一张图片上方

Question

如何在任何电子邮件模板中定位元素。 在设计中，我必须将一个图像放在另一个图像上方，这只能通过绝对定位或给它设置边距来实现。 据我所知，谷歌不支持任何元素的边距和定位样式。 是否有其他方法解决此问题..

目前它看起来像这样

期望输出

- Angvish Keshri

Answer 1

大多数常用的电子邮件客户端不支持position CSS属性。参考。

我可以向您建议两个选项。

• Put the bigger image as a background of the parent element and put another image in a child <img> tag. And play around with the width, height & float properties of parent and child elements.

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

• Or, if these images are going to be same for all the emails, then create a composite image combining these two.

- Kshitij

Answer 2

封面照片使用 background-image，用户照片使用 img，然后将 img 放在封面照片内，并在上面添加附加的

，并为其设置上偏移量。

工作示例 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/[e-mail]" class="thumbnail" alt="user photo">
  </header>
</div>

- Dariusz Sikorski