html - 有没有办法将此功能区定位在 html 电子邮件中的图像上，以便它适用于 Outlook 等客户端？

Question

在进行研究后，我开始意识到这可能并非对所有客户都可行，但我想问问电子邮件世界最近是否发生了任何变化，让我可以创建如下图所示的内容。我希望带有文字的小蓝丝带出现在图像的顶部。从我所看到的情况来看，负利润率或绝对定位似乎没有我需要的支持。人们是否针对此类问题提出了一些棘手的解决方法？

Answer 1

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

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

好的起点:

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