时间戳

首页 > 解决方案 > 有没有办法将此功能区放置在 html 电子邮件中的图像上，以便在 Outlook 等客户端上运行？

html - 有没有办法将此功能区放置在 html 电子邮件中的图像上，以便在 Outlook 等客户端上运行？

问题描述

在进行研究之后，我开始意识到这可能不适用于所有客户，但我想问一下电子邮件世界最近是否发生了任何变化，这让我可以创建如下图所示的内容。我希望带有文本的小蓝丝带出现在图像顶部。从我所见，它看起来不像负边距或绝对定位有我需要的支持。是否有一些人为这样的事情想出了一些 hacky 解决方法？

在此处输入图像描述

标签： htmlcssemailoutlookhtml-email

解决方案

正如其他人所指出的......您可以使用 VML 选项，但是用于向下推动选项卡的填充可能因电子邮件客户端而异，因此绝对值得测试。

在表格单元格上设置高度并使用垂直对齐底部可能是另一种测试方法，但我个人总是坚持使用填充，因为它对我来说一直很稳固。虽然我应该注意......我认为我不必将某些东西与背景图像的最底部对齐。我通常从图像顶部居中或填充元素。

开始的好地方：

<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">                        
   <tr>                          
      <td background="https://via.placeholder.com/359x174" bgcolor="#00e5ff" height="174" styke="width:100%;max-width:359px;height:174px;" valign="top" width="359">
         <!--[if gte mso 9]>
         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:359px;height:174px;">
         <v:fill type="tile" src="https://via.placeholder.com/359x174" color="#00e5ff" />
         <v:textbox inset="0,0,0,0">
         <![endif]-->
         <div>                              
            <table border="0" cellpadding="0" cellspacing="0" width="100%">                                
               <tr>                                  
                  <td style="padding:139px 0 0 0;">                                    
                     <table align="left" border="0" cellpadding="0" cellspacing="0">                                      
                        <tr>                                        
                           <td align="center" bgcolor="#2979ff" style="font-family:arial, Helvetica, sans-serif; font-size:15px; line-height:20px; font-weight:600; color:#ffffff; padding:8px 15px; border-radius:0 7px 0 7px;">
                              Earn $10 off
                           </td>
                        </tr>
                     </table>
                  </td>
               </tr>
            </table>
         </div>
         <!--[if gte mso 9]>
         </v:textbox>
         </v:rect>
         <![endif]-->
      </td>
   </tr>
</table>

推荐阅读