Question

我必须在电子邮件模板中做一些标题。文字是动态的，所以我不知道宽度。我知道，由于前景，我宁愿不能使用背景图片...... 我只是想知道你是否有人建议如何在邮件中做这样的事情：

enter image description here

（当然我正在使用桌子）

Answer 1

看看我刚刚制作的这个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;
}

Answer 2

这对你有用。在这里，我使用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>

在电子邮件模板中使用图片设置动态标题

2 个答案: