Стилизация динамических заголовков картинкой в ​​шаблоне электронного письма

Мне нужно сделать несколько заголовков в шаблоне электронного письма. Текст динамический, поэтому ширину не знаю. Я знаю, что скорее не могу использовать фоновые изображения из-за внешнего вида ... Мне просто интересно, есть ли у кого-нибудь из вас какие-либо предложения, как сделать что-то подобное в письмах:

введите описание изображения здесь

(конечно, я использую таблицы)


css email html-email
person sorioz    schedule 19.08.2014    source источник
comment
вы можете опубликовать свой HTML-код?   -  person Kheema Pandey    schedule 19.08.2014
comment
вы можете использовать <img> для полос и <h1> поверх этого изображения   -  person singe3    schedule 19.08.2014
comment
Хима Пэндли: У меня еще нет HTML-кода, потому что я не знаю, как его решить. Я все еще думаю ... singe31: как в письмах переместить текст над изображением? Я почти уверен, что ты не сможешь. Невозможно использовать позицию: абсолютная или маржа минус ...   -  person sorioz    schedule 19.08.2014
comment
stackoverflow.com/questions/21882361/   -  person sorioz    schedule 19.08.2014
comment
stackoverflow.com/questions/3403205/   -  person sorioz    schedule 19.08.2014

Ответы (2)


arrow_upward
0
arrow_downward

Это должно сработать для вас. Здесь я использую метод пуленепробиваемого фонового изображения, опубликованный на http://backgrounds.cm/

Вот как это выглядит: http://codepen.io/bdavis/pen/KmonD

Наслаждаться!

<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width" />
 </head>
 <body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background:    #ffffff; color: #222222; font-family: 'Helvetica Neue', arial, sans-serif; line-height: 1.3; margin: 0; min-width: 100%; padding: 0; width: 100% !important" bgcolor="#ffffff">
 <table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr style="padding:0">
   <td style="border-collapse: collapse !important; padding: 0" background="http://www.tutorialwelt.de/wp-content/uploads/2010/01/streifen4.jpg" bgcolor="#222222" valign="top">
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
    <v:fill type="tile" src="http://www.tutorialwelt.de/wp-content/uploads/2010/01/streifen4.jpg" color="#222222" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
    <![endif]-->
    <div style="text-align:center;">
     <center>
        <font style="display:inline-block;background-color:#FFFFFF;text-align:center;font-family:'helvetica-neue', sans-serif;font-weight:bold;font-size:24px;color:#222222;" align="center">&nbsp;ZAHLUNGSART&nbsp;</font>
     </center>
    </div>
    <!--[if gte mso 9]>
    </v:textbox>
    </v:rect>
    <![endif]-->
  </td>
 </tr>
</table>
</body>
</html>
person Brett D.    schedule 19.08.2014
comment
Спасибо, решила мою проблему! Я хотел добавить вам +1, но у меня недостаточно репутации. :) - person sorioz; 20.10.2014

arrow_upward
0
arrow_downward

Взгляните на этот JSFiddle, который я только что сделал: http://jsfiddle.net/de5L5vmo/1/

HTML

<div class="background">
    <div class="content">
        <h2>Zahlungsart</h2>
    </div>
</div>

Css

.background {
      background-image: url('http://www.tutorialwelt.de/wp-content/uploads/2010/01/streifen4.jpg');
}

h2 {
    text-align:center;
    font-family:sans-serif;
}

.content{
    margin:0 auto;
    background-color:white;
    width: 150px;
}
person Maharkus    schedule 19.08.2014
comment
Спасибо за ваш ответ, он работает в HTML, но он не работает с некоторыми почтовыми клиентами: background-image не поддерживается Outlook. Я хочу кросс-клиентское решение. См. Поддерживаемые коды: campaignmonitor.com/css - person sorioz; 19.08.2014