个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 08:31:04 26 4
gpt4 key购买 nike

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

代码如下:

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

这是预期的结果:

enter image description here

最佳答案

我认为这就是您所追求的。 小问题:Outlook 2000 - 2003 使用 IE 呈现电子邮件，而 Outlook 2007+ 使用 MS Word 呈现电子邮件。 VML 是 Outlook 2007+ 的 native 编码语言。我已经使用 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 而另一 block 代码用于其他电子邮件客户端。

仅 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 - 如何通过html在图像中插入此文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44791116/

26 4 0
文章推荐： c - 递归方法的二分法？
文章推荐： java - 使用 AffineTransformOp 过滤图像时 JVM 崩溃
文章推荐： c - 尝试更改 char* 指针位置时出现 "Error: expression must be a modifiable lvalue"
文章推荐： java - 从 Java 中读取 R 中的 csv 文件(使用 JRI)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com