Hier ist, was ich zu erreichen versuche: Ich möchte ein Pixel dickes weißes Quadrat, um ein Bild zu überlagern. 
Overlay-Bild für "Haarstrich" -Effekt in E-Mail
(http://i.imgur.com/hKuZblq.png)
auf einer Webseite, das ist einfach, ich habe mehrere Optionen (siehe unten). Das Problem ist, dass keine von ihnen weitgehend kompatibel mit E-Mail sind:
Ich habe ein gif von einem weißen Quadrat auf einem transparenten Hintergrund, den ich oben auf dem Bild platzieren kann.
kann ich absolute Positionierung mit z-Index verwenden, es auf dem Bild zu platzieren.
<div style='position:relative;'>
<img src=http://i.imgur.com/fBP9Pxn.jpg style='width:585px;height:440px;position:absolute;z-index:10;'>
<img src=http://i.imgur.com/Hb9jGED.gif style='width:585px;height:440px;position:absolute;z-index:20;'>
</div>Ich konnte das Hauptbild als Hintergrundbild eines div oder eine Tabellenzelle, und legen Sie das Overlay-Bild innerhalb der div oder Zelle ebenfalls gesetzt.
<table>
<tbody>
<td style='background-image:url(http://i.imgur.com/fBP9Pxn.jpg);background-size:100% 100%;'>
<img src=http://i.imgur.com/Hb9jGED.gif />
</td>
</table>Anstelle der Overlay, konnte ich ein div mit einem Hintergrundbild haben, und innerhalb dieses div Ort ein anderes div mit einem transparenten Hintergrund und weißen Rand und haben Polsterung auf der übergeordneten div den Einsatz zu erzwingen:
<div style='background-image:url(http://i.imgur.com/fBP9Pxn.jpg);background-size:100% 100%;height:440px;width:585px;display:block;padding:15px;'>
<div style='display:block;width:585px;height:440px;border:1px solid white'></div>
</div>Alle diese funktionieren gut. Das Problem ist, dass ich mich mit E-Mail beschäftige.
E-Mail:
Absolute Positionierung ist nicht consistantly unterstützt. Viele E-Mail-Clients ignorieren dies und platzieren das erste Bild direkt unter dem zweiten Bild.
Hintergrundbilder werden häufiger unterstützt, jedoch wird background-size von E-Mail-Clients weitgehend ignoriert. Mein Bild kann verschiedene Größen haben, und es wird abgeschnitten, was nicht akzeptabel ist.
Ich kann erreichen, was ich will, indem ich ein Bild der richtigen Größe erzeuge, um in die E-Mail zu passen, und dann die background-image Optionen benutze. Das ist, was ich derzeit tue, mit der Vorlage hier zur Verfügung gestellt: https://litmus.com/community/learning/25-understanding-background-images-in-email
Der Code ein bisschen hässlicher ist, weil es VML (Microsofts Version von svg) als Ausweich verwendet, das erforderlich ist, um die Wirkung der Arbeit in Outlook 2007 zu machen/10/13/16 (Interessanterweise scheint 03 gut zu funktionieren)
<table>
<tbody>
<tr>
<td background="http://i.imgur.com/0JUOCnf.png" bgcolor="#7bceeb" width="585" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:585px;">
<v:fill type="tile" src="http://i.imgur.com/0JUOCnf.jpg" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<img src="http://i.imgur.com/Hb9jGED.gif" alt="Exterior" width="585" style="width:585px;" />
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>ich konnte sogar ein Bild erzeugen, das den überlagerten Platz auf ihn.Aber es ist eine Menge Overhead, um das Bild für jede E-Mail zu generieren, ebenso wie Speicherplatz zum Speichern der generierten Bilder, da es ein Web-Tool gibt, das von Leuten verwendet wird, um diese E-Mails direkt zu erzeugen.
Also, gibt es sowieso, was ich will (ohne benutzerdefinierte Bilder für jede E-Mail zu erzeugen) in einer Weise, die weitgehend kompatibel mit E-Mail ist?