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

大多数电子邮件客户端（position和relative）都不支持CSS absolute。实现这一目标的最佳方法是将图像设为背景图像：

<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>而不是<div>来发送电子邮件仍然更安全，除非Gmail是您必须支持的唯一客户。

Answer 2

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

使用表而不是div的原因是渲染引擎对div中的许多属性的支持有限。例如。基于Word的Outlook不支持width和padding div元素，如果没有这些元素，则无法定义布局。但是，td元素可以很好地支持这些属性。这就是我们必须使用表格的原因。

如果继续使用此方法，您还应遵循以下几种最佳做法：

设置cellpadding="0"和cellspacing="0"以避免某些客户的预期间距。
仅为HTML元素使用一个类。如果您使用多个，则只会应用第一个。
不要使用复杂的CSS选择器（例如，这在基于Word的Outlook中不起作用：.bg-brown td { ### CSS ### }。您应该坚持使用简单的类定义。
最后，当您使用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文本将图像作为绝对位置发送到电子邮件

2 个答案: