Legen Sie einen Text in Bild in E-Mail-Körper

Ich habe für ein paar Stunden versucht, eine E-Mail-Körper, der einige Text in einem Bild enthält zu bauen. Ich habe diesen Code ausprobiert, aber der Text wird immer unter dem Bild angezeigt. Irgendwelche Ideen?Legen Sie einen Text in Bild in E-Mail-Körper

Code:

<body style="margin: 0 !important; padding: 0;background-color: #486380;"> 
    <center style="width: 100%;background-color: #486380;"> 
     <table style="width: 100%; max-width: 800px;"> 
      <tr> 
       <td> 
        <table width="100%" style="margin-top: 15px;margin-bottom: 15px"> 
         <tr> 
          <td> 
           <div style="position: relative"> 
            <center> 
             <img style="position: absolute" src="img/test.png" alt="Login" /> 
             <span style="position: absolute">Hello everyone</span> 
            </center> 
           </div> 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
    </center> 
</body>

Quelle

2017-02-01 GeoDim

Sind Sie sehen die Ausgabe in Outlook? Wenn ja, unterstützt Outlook nicht "Position" oder Lasten von anderen CSS ... http://msdn.microsoft.com/en-us/library/aa338201.aspx –

Ich sehe Meine Versuche in Google Mail! – GeoDim

Wenn Sie Tabellen verwenden möchten, dann verwenden Sie das Hintergrundbild-Attribut für Tabelle/TD – NoviceProgrammer

beste Lösung, die ich vorschlagen kann, wäre das Bild zu machen einen Hintergrund (auf einem td) und Ihren Textinhalt auf ihn aufzubauen.

Verwenden Sie https://backgrounds.cm/, um den entsprechenden Code zu generieren, und fügen Sie Ihren Text zwischen den Tags div hinzu. Würde auch empfehlen, transparente png-Abstandhalter zu verwenden, um jeden leeren Raum mit dieser Methode auszufüllen.

Quelle

2017-02-01 12:45:28 Gwesolo

CSS position ist not well supported in email clients, das ist also keine gute Option, um Live-Text über ein Bild zu erreichen.

Eine Option, wie Gwesolo vorgeschlagen hat, ist ein Hintergrundbild zu verwenden. Sie können Code unter Verwendung von backgrounds.cm generieren und erhalten eine ziemlich gute Abdeckung über E-Mail-Clients. Sogar Desktop-Outlook! Aber je nach dem Design des Bildes oder den Abmessungen der Box, in der es erscheint, könnte es etwas Finesse erfordern. Eine zweite Option besteht darin, einen Dienst wie Nifty Images zu verwenden, der dynamische Bilder mit eingebautem benutzerdefiniertem Text erzeugen kann. Er ist nicht so zugänglich und wird auf Mobilgeräten möglicherweise nicht so gut angezeigt, aber es ist ein totes einfaches, unkompliziertes Verfahren.

Quelle

2017-02-01 14:44:27

Sie wollen „alle Grundlagen abdecken:.. Wie es war Ich denke, der beste Ansatz ist es, den td style, Inline-CSS und das backgrounds.cm Tool verwendet

<body style="margin: 0 !important; padding: 0;background-color: #486380;"> 
 
    <center style="width: 100%;background-color: #486380;"> 
 
     <table style="width: 100%; max-width: 800px;"> 
 
      <tr> 
 
       <td align="center" width="600"> 
 
        <table width="100%"> 
 
         <tr> 
 
          <td background="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" style="background-image:url(http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg; background-repeat: no-repeat") align="center"> 
 
           <div style="margin:auto;"> 
 
             <p> <span style="font-size: 24px; text-align: center; color: #ffffff">Hello everyone</span></p> 
 
           </div> 
 
          </td> 
 
         </tr> 
 
        </table> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </center> 
 
</body>

Quelle

2017-02-01 17:23:41 scoopzilla

Legen Sie einen Text in Bild in E-Mail-Körper

Antwort

Verwandte Themen