css - 电子邮件模板中带图片的动态标题样式

标签 css email html-email

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

enter image description here

(当然我用的是表格)

最佳答案

这应该适合您。这里我使用了发布在 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>

关于css - 电子邮件模板中带图片的动态标题样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25386221/

相关文章:

php - 如何在 PHP 中生成唯一的 LIKES id

Javamail API - MessageCountListener 未被调用

除 localhost 之外的 Python SMTP

regex - 我如何仅过滤掉Jenkins-email-ext,BUILD_LOG_REGEX中的错误?

html - CSS - 将图像放置在文本旁边

html - 如何在一个特定的地方防止连字?

html - 图片放在 table 上 - HTML 邮件

web-services - 我如何对电子邮件模板 (HTML/PDF) 进行自动化测试..?

email - Gmail session 分组(线程)导致 HTML 电子邮件格式问题

html - 如何制作一个奇怪形状的 html/css 菜单?