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

Question

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

Answer 1

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

在 table 单元格上设置高度并使用垂直对齐底部可能是另一种测试方法，但我个人始终坚持填充，因为它对我来说一直很稳固。虽然我应该注意...我不认为我曾经不得不将某些东西与 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  off
                           </td>
                        </tr>
                     </table>
                  </td>
               </tr>
            </table>
         </div>
         <!--[if gte mso 9]>
         </v:textbox>
         </v:rect>
         <![endif]-->
      </td>
   </tr>
</table>

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

Is there a way to position this ribbon over an image in html email so that it works on clients like Outlook?

html

css

email

outlook

html-email