Есть ли способ разместить эту ленту над изображением в html электронном письме, чтобы она работала на клиентах, таких как Outlook?

Question

После исследования я пришел к выводу, что это возможно не для всех клиентов, но я хотел бы спросить, изменилось ли что-нибудь недавно в мире электронной почты, что позволило бы мне создать что-то похожее на изображение ниже. Я хочу, чтобы эта маленькая голубая лента с текстом появилась сверху изображения. Из того, что я видел, это не выглядит как отрицательные поля или абсолютное позиционирование имеет поддержку, в которой я нуждаюсь. Есть ли какие-нибудь хакерские обходные пути, которые люди придумали для чего-то подобного?

Answer 1

Как отмечают другие ... Вы можете использовать опцию VML, однако заполнение, используемое для pu sh вкладки вниз, может варьироваться в зависимости от почтовых клиентов, поэтому определенно стоит протестировать.

Набор Высота в ячейке таблицы и использование вертикального выравнивания дна может быть еще одним методом для тестирования, но лично я всегда придерживаюсь отступов, поскольку это всегда было для меня solid. Хотя я должен отметить ... Я не думаю, что мне когда-либо приходилось что-то выравнивать по самому низу изображения 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>