在HTML电子邮件中叠加图像

Question

I am creating an html template, this template contains text and image. Now, we want the image to position above the text just to hide some part of the text (it has a purpose). I already tried to use absolute position for the image but it don't work when it is viewed on email. Is there any tricks to do this?

<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

Is there any tricks to do this?

When working with html in emails, the rules change. Most ways to position elements using css on websites do not work. What I usually end up doing is using tables to put things where they need to be, as annoying as that sounds and is to do. Also, links and images have to be full path ( http://www.example.com/mypage.html instead of mypage.html) or they won't work in the sent email. Another thing is, style-sheets rarely work, and inline styles are the way to go. Basically break all the rules you knew for html on web pages.

Finally, every email client shows html emails different ways, so be aware that what you see may not be what the recipient sees. As to your specific problem though, we need to see your code.

Answer 2

Can't be done in html email (at least consistently across clients anyway). You should read up on the limitations of html email design - here are some resources

Answer 3

What you need to do is use the background image property in css on a cell.

For example, say I have two images. I can overlay them like so:

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