Mailchimp-如何在图像上方添加可变文本

时间:2018-09-27 10:06:59

标签: html css html-email mailchimp email-templates

我在mailchimp中创建了几个模板,并导出html以在我的lavarel项目中实现。在每个电子邮件模板中,我都会更新代码以读取变量。

我的问题是:我想在gmail图像上方添加可变文本。它可以在其他电子邮件客户端中使用,但不能在gmail中使用。

在gmail中,它显示如下: enter image description here

,并且在我的客户邮件中显示得很好: enter image description here

我的代码:

<div class="month-center" style="position: relative; margin: 0 auto; right: 0; left: 0;">
   <strong style="position: absolute; vertical-align: middle; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);left: 0; right: 0; color: white; font-size: 2em; font-family: Arial, 'Helvetica Neue', Helvetica, sans serif;">Setembro</strong>

    <img align="center" alt="" src="https://gallery.mailchimp.com/a9d87c79b29239577e5d51e67/images/1ff7f4b7-c17a-498e-be89-1816b2cbf1a3.jpg" width="300" style="max-width:300px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
  </div>

我认为问题出在Gmail不接受的CSS属性(例如绝对位置)上。

我该如何解决?

1 个答案:

答案 0 :(得分:1)

您是正确的,Gmail(以及许多电子邮件客户端)不支持position

解决您问题的一种方法是使用背景图像而不是定位。

https://backgrounds.cm/是生成电子邮件友好背景图像的最佳工具。

https://www.campaignmonitor.com/css/是检查多个电子邮件客户端CSS兼容性的最佳资源。