如何通过 html 在图像中插入此文本？答案

【问题标题】：How to insert this text within image via html?如何通过 html 在图像中插入此文本？
【发布时间】：2017-12-01 03:31:39
【问题描述】：

我有很多尝试错误，无法将白色图像上的文本作为电子邮件模板。我不是程序员，但由于我是一名平面设计师，我正在尝试研究如何创建电子邮件模板。所以我试图在空白处插入文本，如下所示，但我不知道如何修复它。我希望你能帮助我。谢谢！我正在为邮件黑猩猩做这个作为电子邮件模板。

代码如下：

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Chicology_new</title>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" 
marginheight="0">

<img src="https://chicology.com/wp-content/uploads/2017/06/Chicology_new.png" 
width="612" height="612" alt="">


</body></html>

这是预期的结果：

【问题讨论】：

codepen.io/bbogdanov/pen/gRXybz 这有帮助吗？
@БогданБогданов，你的密码笔坏了。你的可能是答案，但因为我看不到它，所以我把它放在我的。
codepen.io/bbogdanov/pen/gRXybw 那个呢？
codepen 链接现在可以使用，但 Outlook 无法按应有的方式读取背景图像。有关 VML 解决方案，请参见下面的示例。

标签： html css image email email-templates

【解决方案1】：

我想这就是你所追求的。 小故障： Outlooks 2000 - 2003 使用 IE 呈现电子邮件，而 Outlook 2007+ 使用 MS Word 呈现电子邮件。 VML 是 Outlook 2007+ 的本机编码语言。我已经使用 VML 在 Outlook 电子邮件客户端上显示背景，其余的应该显示来自 TD 中定义的背景图像。

<table width="612" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td height="612" valign="top" background="https://chicology.com/wp-content/uploads/2017/06/Chicology_new.png" style="background:url(https://chicology.com/wp-content/uploads/2017/06/Chicology_new.png); background-image: url(https://chicology.com/wp-content/uploads/2017/06/Chicology_new.png);">
	 <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:612px;height:134px;">
    <v:fill type="frame" src="https://chicology.com/wp-content/uploads/2017/06/Chicology_new.png" color="#88d1da" />
    <v:textbox inset="0,0,0,0">
  <![endif]--> 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="44%" align="left" valign="top" style="font-family: Helvetica, Arial, 'sans-serif'; font-size: 12px; color:#000001;padding:50px;">Hi Firstname,<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum, arcu eget pulvinar auctor, dui risus posuere neque, quis ultrices ligula neque vitae lacus. Maecenas imperdiet et libero ut gravida. Vivamus gravida dictum ante, in pulvinar nisl fermentum in. Cras laoreet convallis libero quis sodales. Praesent vel imperdiet ipsum. Cras feugiat ex in felis maximus, et volutpat elit ullamcorper. Integer lacus massa, congue quis mattis nec, sagittis ut elit. <br>
<br>
Aliquam dapibus tincidunt neque, non consectetur magna convallis id. Suspendisse fermentum nibh quis tortor ornare sollicitudin. Nullam nec ornare quam, ut tincidunt nibh. Donec ac tempor erat, a ultricies nisl. Praesent tincidunt condimentum urna sit amet egestas. Cras at molestie est. Proin in eleifend velit, sit amet cursus arcu.
      
      </td>
      <td width="56%">&nbsp;</td>
    </tr>
  </tbody>
</table>

<!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->	
   

   
   
   </td>
    </tr>
  </tbody>
</table>

还有其他方法可以解决这个问题。由于 Outlook 是唯一一个在没有 VML 的情况下不显示背景图像的电子邮件客户端，因此您可以使用 Outlook 条件语句为 Outlook 显示整个代码块，为其他电子邮件客户端显示另一块代码。

仅 Outlook 电子邮件客户端：

<!--[if mso]>
Content ONLY FOR Outlook
<![endif]-->

其他：

<!--[if !mso]><!-->
CONTENT NOT for Outlook
<!--<![endif]-->

您还可以针对特定的 Outlook 电子邮件客户端（如果需要）

<!--[if gte mso 9]>
 Outlook email clients greater than Outlook 2000
<![endif]-->

不同版本的细分。 Outlook 2000 - 版本 9 展望 2002 - 版本 10 展望 2003 - 版本 11 展望 2007 - 版本 12 展望 2010 - 版本 14 展望 2013 - 第 15 版

【讨论】：

【解决方案2】：

好的，所以我开始制作一个JSFiddle，使用CSS Trick's tutorial

我通常不为人们编写代码，但这是我无论如何都需要编写的一个很好的参考。

使用它给我这个 html 的指南：

<div class="image">

      <img src="images/3754004820_91a5c238a0.jpg" alt="" />

      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>

你已经有了，所以我为你修改了它。我真的建议保存this fiddle，以便您可以参考它。我还为您设置了内联样式，以便您可以在电子邮件模板中使用它:)

编辑：请选择正确的答案，它有助于社区流动和线程继续不需要。

【讨论】：

如果只有编码电子邮件这么简单。 Outlook 不能很好地定位，并且使用标题会在不同的电子邮件客户端上提供不同的字体颜色。
是的，但他说“我正在为邮件黑猩猩做这个作为电子邮件模板。”所以我的帖子是正确的
是的，是一样的。 MailChimp 中的电子邮件模板将用于发送电子邮件。