如何使用 html 文本将图像作为绝对位置发送到电子邮件

Question

我正在尝试将图像作为绝对位置发送，图像后面带有 html 文本，但是当我将其发送到 gmail 或其他电子邮件时，它会显示图像，然后在底部显示 html 文本.绝对 css 不起作用。

下面是模板

<template name="welcome">
<html>
<head>

</head>
<body style="font-family: 'Roboto Slab', serif;">
<div class='container-fluid'>
    <img src="http://qa.couchfashion.com/images/mailer.png" style=" position: relative;width: 100%;left: 0;">

    <div style="top: -44px;position: absolute;z-index: 999999;">
        <div class='mailer-name text-center' >
            <h3 style=" font-size: 80px;"> Hey {{receiverName}} </h3>
        </div>
        <div class="mailer-content" style="margin-top: 120px;
            text-align: center;
            text-align: justify;
            padding-left: 10%;
            padding-right: 10%;">
            <h1 class="text-center"> Welcome to the COUCH </h1>
            <hr>
            <h3 class="text-center"> How To use Couch? </h3>
            <h2 class="text-center"> STEP 1 </h2>
            <h3 class="text-center"> Browse Products &amp; Articles </h3>
            <p>Congratulations ladies! You've successfully made it to the first step of Couch. THis step is the
                easiest
                step. We are sure you will have great time browsing through our products and articles as we get you
                the
                best of them. We make sure best gets the best! </p>

            <h2 class="text-center"> STEP 2 </h2>
            <h3 class="text-center"> Collect things you Love </h3>
            <p>
                Hello again! So here we are on the second step. Well this is easy too. You just have to click on the
                love
                button to collect your favourite products and articles there. And there you go. You have your very
                own
                personalized collection. Woo-Hoo!
            </p>


            <h2 class="text-center"> STEP 3 </h2>
            <h3 class="text-center"> Get Appreciation </h3>
            <p>This is the best step. It will help you flaunt your beautiful talents ladies! People can see your
                closet
                and have a glance at your choice. Isn't that cool? You can promote your style and make it popular.
                Let's
                get started ladies!</p>
            <h3 class="text-center"> Thanks for signing up </h3>
            <h3 class="text-center"> All the Love &amp; Regards </h3>
            <h4 class="text-center"> Team COUCH </h4>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

大多数电子邮件客户端（relative 和 absolute）不支持

CSS position。实现此目的的最佳方法是将图像设为背景图像：

<table role="presentation" aria-hidden="true" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
    <tr>
        <td background="http://qa.couchfashion.com/images/mailer.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
            <div>
                <table role="presentation" aria-hidden="true" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td valign="middle" style="text-align: center; padding: 15%ont-family: sans-serif; font-size: 15px;">

                            >> Place your text layout in tables instead of divs <<

                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

电子邮件使用 <table>s 而不是 <div>s 也更安全，除非 Gmail 是您必须支持的唯一客户端。

Answer 2

Ted 的回答是正确的，table 是电子邮件 HTML 的结构方式。他的解决方案应该运作良好。

您使用表而不是 divs 的原因是渲染引擎对 divs 中的许多属性的支持有限。例如。基于 Word 的 Outlook 不支持 div 元素上的 width 和 padding，否则无法定义布局。然而，这些属性在 td 元素上得到了很好的支持。这就是为什么我们必须使用表格。

如果您继续使用此方法，还应遵循一些最佳实践：

设置 cellpadding="0" 和 cellspacing="0" 以避免某些客户出现非预期的间距。
对一个 HTML 元素只使用一个 class。如果您使用多个，则只会应用第一个。
不要使用复杂的 CSS 选择器（例如，这在基于 Word 的 Outlook 中不起作用：.bg-brown td { ### CSS ### }。您应该坚持简单的 class 定义。
最后，当您使用 VML 应用背景图像时，背景图像仅适用于 td 元素中基于 Word 的 Outlook。

下面的代码是我们在 tutorial about background images.

中使用的带有前面文字的背景图片示例

    <table cellpadding="0" cellspacing="0" border="0" width="100%" 
      style="width:100%;min-height:50px; height:50px;border: ### 
      BORDER PROPERTIES ###" background="### SRC of BACKGROUND 
      IMAGE ###">  
       <tr>
          <td style="### FONT PROPERTIES ###">
           <!--[if gte mso 9]>
             <v:rect style="width:540px;height:50px;" 
               strokecolor="none">
             <v:fill type="tile" color="#363636" 
               src="### SRC of BACKGROUND IMAGE ###" /></v:fill>
             </v:rect>
             <v:shape id="NameHere" 
               style="position:absolute;width:540px;height:50px;">
           <![endif]-->
              <p>table background="...." + vml fixed width background</p>
           <!--[if gte mso 9]>
             </v:shape>
           <![endif]-->
         </td>
       </tr>
    </table>

遗憾的是，定位并未涵盖在内，但它仍可能有助于避免一些陷阱。可以使用Campaign Monitor的后台工具生成VML代码，也可以根据相应教程自行制作。

如何使用 html 文本将图像作为绝对位置发送到电子邮件

How to send image to email as position absolute with html text

html

css

email

html-email

meteor