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

发布于 2024-12-18 04:52:14 字数 1023 浏览 4 评论 0原文

我正在使用 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 不支持表格背景图像。

我正在使用电子邮件营销活动 Web 客户端，建议使用内联 css 进行标记，不使用 html、head 和 body 标记，不使用 div 和不使用定位（绝对、相对、固定...）以及使用表格进行标记。

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

提前致谢 =] ！

原文

I'm using html for an Email campaign and I have a problem, I have the following code:

 <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>

This code works perfectly on Gmail, Hotmail, Yahoo and some email clients, but in OUTLOOK it's not showing correctly, I'm pretty sure it is because Outlook doesn't support background images on tables.

I'm using an Email Campaign web client and the recommendations are to markup using inline css, not using html,head and body tags, not using divs and not using positioning (absolute,relative,fixed ...) and to markup with tables.

How do I position the two call to action buttons on top of the main image on specific places without using these techniques ?

Thanks in advance =] !

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

各自安好 2024-12-25 04:52:14

如果不支持 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>

If CSS is not supported, then there is no way to guarantee positioning the buttons on top of the image. In that case, I would recommend changing to using an image map. That is pure html without css, though I really don't know if it is supported by all the email clients.

You would incorporate the button image into the main image and then set your coordinates (I don't know them, they are represented by "?'s" below). Something like:

<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>

回复收藏 0 原文