Overlay hinzufügen Bild in HTML EMail kompatibel mit den meisten Desktop- und Web-Clients EMail

Question

Gibt es eine Möglichkeit im Jahr 2017 entweder ein bild- oder textbasierte Overlay über das Hauptbild innerhalb einer HTML-E-Mail angezeigt werden, so dass es ordnungsgemäß von den meisten der aktuellen Desktop-und Web-E-Mail-Clients gerendert: Outlook 2007, Thunderbird, Mobile Clients, GMail, Outlook.com, Yahoo Mail usw.?

Es könnte sich beispielsweise um ein kleines Wiedergabeknopf-Rendering über dem Hauptbild handeln, das beim Klicken auf eine Video-URL verweist.

Answer 1

Ja, obwohl es eine Menge Code erfordert, da Outlook CSS background-image nicht unterstützt, so müssen wir VMLzusätzlich zu CSS verwenden, um ein Hintergrundbild zu erhalten, das überall angezeigt wird. backgrounds.cm ist ein guter Ausgangspunkt, wurde aber seit einiger Zeit nicht mehr aktualisiert. So etwas ist ein guter Ausgangspunkt zu bauen:

<tr> 
    <!-- Bulletproof Background Images c/o https://backgrounds.cm --> 
    <td background="http://placehold.it/600x180/222222/666666" bgcolor="#222222" valign="middle" style="background-position: center center !important; background-size: cover !important;"> 
     <!--[if gte mso 9]> 
     <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width: 600px; height: 180px;" src="http://placehold.it/600x180/222222/666666" /> 
     <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 600px; height: 180px;"> 
     <v:fill opacity="0%" color="#222222" /> 
     <![endif]--> 
     <div> 
      <!--[if mso]> 
      <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600"> 
      <tr> 
      <td align="center" valign="top" width="600"> 
      <![endif]--> 
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%"> 
       <tr> 
        <td valign="middle" style="padding: 20px; color: #ffffff;"> 
         <img src="http://placehold.it/100" height="100" width="200" alt=""> 
         <p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.</p> 
        </td> 
       </tr> 
      </table> 
      <!--[if mso]> 
      </td> 
      </tr> 
      </table> 
      <![endif]--> 
     </div> 
     <!--[if gte mso 9]> 
     </v:fill> 
     </v:rect> 
     </v:image> 
     <![endif]--> 
    </td> 
</tr> 

Answer 2

Die Verwendung von VML ist immer noch die einzige Möglichkeit, Hintergrundbildunterstützung für Outlook-Umgebungen zu erhalten. So sollten Sie dieses Tool url https://backgrounds.cm/

Drop Bild verwenden, setzen Sie ihn auf ‚einzelne Tabelle verkaufen‘ und einige Dimensionen gesetzt, dann bauen Sie gerade Ihre Overlay-Inhalt zwischen den Tags <div>