Question

我有很多试用错误，要将白色图像上的文字作为电子邮件模板包含在内。我不是程序员，而是试图研究如何创建电子邮件模板，因为我是一名平面设计师。所以我试图在白色空间中插入文本，如下所示，但我不知道如何修复它。我希望你能帮助我。谢谢！我这样做是为了将邮件黑猩猩作为电子邮件模板。

以下是代码：

<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

我认为这就是你所追求的。 一点细分： 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版

Answer 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，以便您可以参考它。我还为您内联所有内容，以便您可以在电子邮件模板中使用它：）

编辑：请选择正确的答案，它可以帮助社区流程和线程继续进行，而不需要。

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

2 个答案: