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

Question

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

代码如下：

<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>

这是预期的结果：

Answer 1

好的，所以我开始制作 JSFiddle, using 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 以便您可以参考它。我还为您设置了内联样式，以便您可以在电子邮件模板中使用它:)

编辑：请select正确答案，它有助于社区流程和线程在不需要的地方继续。

Answer 2

我认为这就是您所追求的。 小细节： 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 Outlook 2002 - 版本 10 Outlook 2003 - 版本 11 Outlook 2007 - 版本 12 Outlook 2010 - 版本 14 Outlook 2013 - 版本 15

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

How to insert this text within image via html?

html

css

email

image

email-templates