Question

我正在创建一个html模板，此模板包含文本和图像。现在，我们希望图像位于文本上方，只是为了隐藏文本的某些部分（它有一个目的）。我已经尝试使用图像的绝对位置，但在电子邮件中查看它时不起作用。这有什么窍门吗？

<div class="wrap" style="color: #4E4E4E; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; max-width:600px; margin:0 auto;position:relative;">    

<div class="e_body" style="max-width:600px">
<div class="e_head" style="position:absolute; width: 100%;text-align:center;">
<img src="http://i.imgur.com/EmNU0CO.jpg">
</div>

<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>

http://jsfiddle.net/2fH2G/

Answer 1

有没有做这个的技巧？

在电子邮件中使用html时，规则会发生变化。在网站上使用css定位元素的大多数方法都不起作用。我通常最终会做的是使用表格把东西放在他们需要的地方，就像听起来和做的那样烦人。此外，链接和图片必须是完整路径（http://www.example.com/mypage.html而不是mypage.html），否则它们将无法在已发送的电子邮件中使用。另一件事是，样式表很少工作，内联样式是要走的路。基本上打破了你在网页上为html知道的所有规则。

最后，每个电子邮件客户端都以不同的方式显示HTML电子邮件，因此请注意，您看到的内容可能不是收件人看到的内容。至于你的具体问题，我们需要看你的代码。

Answer 2

无法在html电子邮件中完成（至少在客户端中始终如一）。您应该了解html电子邮件设计的限制 - here are some resources

Answer 3

您需要做的是在单元格的css中使用背景图像属性。

例如，假设我有两张图片。我可以像这样叠加它们：

<td style="background:url('/images/image1.png');">
  <img src="/images/image2.png" />
</td>

在HTML电子邮件中叠加图像

3 个答案: