在电子邮件模板中使用图片设置动态标题的样式答案

【问题标题】：Styling dynamic headings with picture in e-mail template在电子邮件模板中使用图片设置动态标题的样式
【发布时间】：2014-10-12 17:15:35
【问题描述】：

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

（当然我用的是表格）

【问题讨论】：

你能发布你的 HTML 代码吗？
您可以使用<img> 作为条纹，并在该图像顶部使用<h1>
Kheema Pandley：我还没有 HTML 代码，因为我不知道如何解决它。我还在想... singe31：如何在邮件中将文本移动到图像上方？我几乎可以肯定，你不能。没有办法使用position:absolute，或者margin减...
stackoverflow.com/questions/21882361/…
stackoverflow.com/questions/3403205/…

标签： css email html-email

【解决方案1】：

这应该适合你。这里我使用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>

【讨论】：

谢谢，它解决了我的问题！我想加你 +1，但我没有足够的声望。 :)

【解决方案2】：

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

【讨论】：

感谢您的回答，它在 HTML 中工作，但它不适用于某些电子邮件客户端：outlook 不支持背景图像。我想要一个跨客户端的解决方案。查看支持的代码：campaignmonitor.com/css