Wie setze ich Text über ein Bild (in E-Mails)?

Question

Da dies unmöglich ist: ::after for inline HTML email?

Wie kann ich Text über das Bild unten setzen?

Beachten Sie, dass position und negativen Margen scheinen nicht per E-Mail unterstützt werden.

<img src="http://www.livetochallenge.com/assets/blue-banner.png"> 
<div style="display: inline-block;"> # Put this text on banner 
    Put<br> 
    Over<br> 
    Image 
</div> 

Answer 1

Wenn es darum geht, um Text-over-Bild in E-Mail, Ihre sicherste Weg, den Text auf das Bild-Rendering und ALT-Tags bereitgestellt wird. Dies gibt Ihnen 100% ige Sicherheit, dass der gesamte Text immer auf dem Image ist, unabhängig vom Gerät oder E-Mail-Client. Viele Clients da draußen unterstützen keine Hintergrundbilder, so dass es zwar auf einem richtig gerendert wird, aber immer noch der Benutzer, der Outlook von 2009 verwendet.

Einige meiner Kollegen haben diese Seite mit ziemlich guten Ergebnissen verwendet : https://backgrounds.cm/ - aber es funktioniert nicht auf allen Clients/Geräten.

Eine andere Lösung wäre, den Hintergrund zu "täuschen". Wenn der Text beispielsweise über einer einfarbigen Grafik liegt, können Sie diese unabhängig voneinander ausschneiden und eine Hintergrundfarbe verwenden. So ist der Text immer noch live. Zum Beispiel - das von Ihnen bereitgestellte Bild scheint ein Banner zu sein. Vielleicht ist der mittlere Teil einfach nur ein TD mit einer Hintergrundfarbe von # 2E3E65, und die umgebenden Elemente haben das von Ihnen bereitgestellte Bannerbild.

Mit den oben genannten, aber mein starker Vorschlag ist, die Bildroute zu gehen. Dann kann der Fokus auf Responsive Testing im Gegensatz zu Editing gelegt werden. Hoffe, ich habe geholfen.

EDIT Werfen Sie einen Blick auf diese: https://www.campaignmonitor.com/css/ ein absolutes Muss, es ist eine sehr praktische Anleitung den Code-Route Wenn gehen die, welche Elemente veranschaulicht/tags/Eigenschaften auf allen gängigen E-Mail-Clients. Es kann auch von Vorteil sein, Informationen auf einem Client zu übergeben, wenn sie darauf bestehen, auf Live-Text :-)

EDIT 2

ich alles nur tat inline hier. Das Markup kann stark bereinigt werden, wenn Sie ein style-Tag einfügen möchten, dann fügen Sie einfach die Styles darin hinzu (statt in html).

<table style="width:300px; border-collapse: collapse; margin: 0; padding: 0; border: none;"> 
<tr style="height: 54px;"> 
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://www.livetochallenge.com/assets/blue-banner.png" style="margin: 0; padding: 0;"/></td> 
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none;"><div style="background-color: #354871; height: 37px; color: white; text-align: center; padding-top: 15px;"># Put this text on banner</div></td> 
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://i.imgur.com/OgwtHvr.png" style="margin: 0; padding: 0;"/></td> 
</tr> 
</table> 

Dies wird die "Fudge" -Effekt erzeugen, wie unten zu sehen: .

Hinweise - Ich habe nur Photoshop verwendet, um das Bild horizontal zu spiegeln. Berücksichtigen Sie auch diese geringfügige Farbänderung. Es ist nur eine Frage, wie ich das umgedrehte Bild exportiert habe.