如何在不使用定位、Div 或背景的情况下将图片放在其他图片之上？答案

【问题标题】：How to put a picture on top of other without using Positioning, Divs or Backgrounds?如何在不使用定位、Div 或背景的情况下将图片放在其他图片之上？
【发布时间】：2011-11-25 15:08:18
【问题描述】：

我正在使用 html 进行电子邮件营销活动，但我遇到了问题，我有以下代码：

 <TABLE width="550px" height="723px" BACKGROUND="FlyerImage.jpg" border="0" cellpadding="0" cellspacing="0">
 <TR> 
    <TD style="padding-top:190px; padding-right:30px; line-height:0px;" align="right"> 
        <a style="line-height:0px;" href="http://LINK.com/"> 
            <img src="ViewOffer.png">
        </a> 
    </TD>
 </TR>

 <TR> 
    <TD style="padding-bottom:185px; padding-left:35px; line-height:0px;" align="left"> 
        <a style="line-height:0px;" href="http://LINK.com/"> 
            <img src="ViewMore.png">
        </a> 
    </TD>
 </TR>

</TABLE>

此代码在 Gmail、Hotmail、Yahoo 和一些电子邮件客户端上运行良好，但在 OUTLOOK 中显示不正确，我很确定这是因为 Outlook 不支持表格上的背景图像。

我正在使用 Email Campaign 网络客户端，建议使用内联 css 进行标记，不使用 html、head 和 body 标签，不使用 div 也不使用定位（绝对、相对、固定 ...）以及带有表格的标记。

如何在不使用这些技术的情况下将两个号召性用语按钮定位在主图像顶部的特定位置？

提前致谢 =] ！

【问题讨论】：

标签： html css html-email email-client

【解决方案1】：

如果不支持 CSS，则无法保证将按钮定位在图像顶部。在这种情况下，我建议改为使用图像映射。那是没有css的纯html，虽然我真的不知道它是否被所有的电子邮件客户端支持。

您将按钮图像合并到主图像中，然后设置您的坐标（我不知道它们，它们由下面的“？”表示）。比如：

<img src="FlyerImage.jpg" alt="alternative text" usemap="#flyer" />
<map name="flyer">
  <area shape="rect" coords="?,?,?,?" href="http://LINK.com/" /> <!--button 1-->
  <area shape="rect" coords="?,?,?,?" href="http://LINK.com/" /> <!--button 2-->
</map>

【讨论】：

【解决方案2】：

HTML 电子邮件中既不支持背景图片也不支持定位。这是一个很好的参考：http://www.campaignmonitor.com/css/

【讨论】：

【解决方案3】：

我从未尝试过，但似乎有一种丑陋的方式可以强制 Outlook 支持背景图像。 Link.

【讨论】：