Поместите текст внутри изображения в тело электронной почты

Я пытаюсь пару часов создать тело электронной почты, которое содержит некоторый текст внутри изображения. Я пробовал этот код, но текст всегда отображается ниже. Есть идеи?Поместите текст внутри изображения в тело электронной почты

Код:

<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>

источник

2017-02-01 GeoDim

ли вы просматриваете вывод в Outlook? Если это так, Outlook не поддерживает «позицию» или загружает другие CSS ... http://msdn.microsoft.com/en-us/library/aa338201.aspx –

Я просматриваю мои попытки в gmail! – GeoDim

Если вы собираетесь использовать таблицы, то почему бы не использовать атрибут фонового изображения в таблице/TD – NoviceProgrammer

Лучшее решение я могу предложить будет сделать изображение фон (на td) и строить содержание текста поверх него.

Используйте https://backgrounds.cm/, чтобы сгенерировать соответствующий код и добавить текст между тегами div. Также рекомендуется использовать прозрачные прокладки png для заполнения любого пустого пространства этим методом.

источник

2017-02-01 12:45:28 Gwesolo

CSS position is not well supported in email clients, так что это отличный вариант для достижения живого текста над изображением.

Один из вариантов, как предложил Гвезоло, - использовать фоновое изображение. Вы можете сгенерировать код с помощью backgrounds.cm и получить довольно хорошее покрытие через почтовые клиенты. Даже настольный Outlook! Но в зависимости от дизайна изображения или размеров окна, в котором он появляется, это может потребовать некоторой утонченности.

Второй вариант заключается в использовании службы, такой как Nifty Images, которая может генерировать динамические изображения с использованием встроенного встроенного текста. Она не такая доступная и может не отображаться также на мобильных устройствах, но это простой и простой подход.

источник

2017-02-01 14:44:27

Вы хотите, чтобы «охватить все ваши базы:.., Как это было, я думаю, что лучший подход состоит в использовании тд стиль, инлайн-CSS и инструмент backgrounds.cm

<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>

источник

2017-02-01 17:23:41 scoopzilla

Поместите текст внутри изображения в тело электронной почты

ответ

Смежные вопросы