Bilder übereinander in Outlook überlagern (absolute Positionierung)

Question

Ich habe Probleme, eine Cross-Mail-Client-Methode zu finden, mit der Bilder übereinander gestapelt werden können. Ich suche nach etwas, das auch für Outlook funktionieren würde. Ich benutze auch die Inky-Templating-Sprache von Foundation/Zurb, obwohl ich immer noch schreiben kann, was auch immer ich möchte.

Ich hatte erfolgreich http://blog.gorebel.com/absolute-positioning-in-email/ Trick von 0-Breite/Höhe Container mit Überlauf verwendet, damit es auf allen anderen E-Mail-Clients funktioniert, nur Outlook ist das böse Kind.

Hat jemand Tricks, um Bilder (nicht Hintergründe) in Outlook übereinander zu legen?

EDIT

Das Ziel: https://imgur.com/a/xFq4d Wie Sie auf diesem Bild sehen können, die „Header“ der Karte haben zwei Bilder: ein klassisches Avatar als abgerundetes Bild, und die gleiche „Avatar“ hat einige Filter angewendet und wird als Hintergrundbild mit einer speziellen runderen Ecke verwendet

HINWEIS: Ich bin die Unschärfe-Filter/runden Ecken sind auf einigen E-Mail-Client nicht verfügbar, wir haben alternativen Code, um mit jenen E-Mail-Clients zu bewältigen, die sind nicht unterstützt

Der absolute Positionierung Code, den ich vor wurde mit (ich bin in dem Prozess divs Umschreiben tinten der Zeilen/Spalten zu verwenden, die den Code umwandeln Tabellen zu verwenden

<div class="professional-card"> 
    <div class="header"> 
     <div class="absolute-wrapper"> 
      <div class="avatar-background-wrapper absolute-in-wrapper"> 
       <%= avatar_img(class: 'avatar-background') %> 
      </div> 
     </div> 
     <div class="absolute-wrapper"> 
      <div class="avatar employee %> absolute-in-wrapper"> 
       <%= avatar_img %> 
       <div class="firstname"> 
        <%= model.user.first_name %> 
       </div> 
       <div class="company-name"> 
        <%= model.company_name %> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="content"> 
     <div class="absolute-wrapper"> 
      <div class="absolute-in-wrapper"> 
       <div class="position"> 
        <%= model.position %> 
       </div> 
       <ul class="tags"> 
        <%= tags %> 
       </ul> 
      </div> 
     </div> 
     <div class="absolute-wrapper"> 
      <div class="absolute-in-wrapper"> 
       <div class="company-logo"> 
        <%= logo_img %> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Der absolute Positionierung SCSS Code zu dem genannten Trick entspricht (dh wird automatisch in der Nachricht inline)

.absolute-in-wrapper { 
    display: inline-block; 
} 

.absolute-wrapper { 
    max-height: 0; 
    max-width: 0; 
    overflow: visible; 
} 

Answer 1

Der einzige Weg, wie Sie Hintergrundbilder in Outlook arbeiten können, ist die Verwendung von VML.

<div style="background-color:#ff0000; width:600px;"> 
    <!--[if gte mso 9]> 
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> 
    <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/> 
    </v:background> 
    <![endif]--> 
    <table height="450" width="600" cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg"> 
     <h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;"> 
      Background Image with text on top 
     </h1> 
     </td> 
    </tr> 
    </table> 
</div> 

Sie können die meisten dieser Code bei https://backgrounds.cm finden.

• https://jsfiddle.net/wallyglenn/7zLaLrfx/

Abgerundete Ecken

Wenn Sie eine Technik, mit abgerundeten Ecken mit Outlook haben, schreiben Sie Ihre Lösung. border-radius: funktioniert nicht mit Outlook 2007-2016.

Absolute Positionierung

position: funktioniert nicht in Outlook, Gmail oder ähnliche E-Mail-Programme. Auch die Seite, auf der Sie über Alternativen gepostet haben, funktioniert in Outlook nicht. Der beste Weg, um Positionsprobleme zu überwinden, ist das Entwerfen einer E-Mail, wenn dies nicht erforderlich ist.

https://www.campaignmonitor.com/css/positioning-display/position/

Verwendung Verbreiterungen

Eine Alternative ist Spacer Tabellen zu verwenden. Auf diese Weise können Sie Platz hinzufügen.

<!--[if (gte mso 9)|(IE)]> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td height="8" style="padding: 0; mso-line-height-rule: exactly; line-height: 2px; font-size: 0;"> 
     &nbsp; 
    </td> 
    </tr> 
</table> 
<![endif]--> 

Viel Glück.