Question

我正在创建一个电子邮件模板，其中包含图像顶部的背景图像和文本/ CTA按钮。我正在使用bulletproof backgrounds作为背景图像，并使用beefree.io编辑器为CTA按钮输出的按钮。除了Outlook 2010之外，两者都可以在所有客户端中完美呈现。当按钮只是一个图像时，我可以让CSS按钮在背景只是一种颜色时完美呈现，反之亦然。当我把两者放在一起时，它呈现以下内容：

这就是它应该呈现的方式：

CSS按钮显示在错误的位置。有没有人对我在代码中出错的地方有任何建议？

https://codeshare.io/zr0Bj（背景图片的代码从第192行开始）

由于康纳

Answer 1

不幸的是，您无法使用防弹背景图像顶部的防弹按钮。而不是这个，我会使用td和标签按钮版本的这个按钮。（关于Acid的电子邮件上有一篇很棒的文章 - https://www.emailonacid.com/blog/article/email-development/simple-code-based-bulletproof-button）

这两种“防弹”技术效果不佳的原因是Outlook用来模仿其他电子邮件客户端正常工作的VML（矢量标记语言）。 Outlook接受的VML是有限的（就像Outlook的所有内容一样......）并且不允许堆叠，因此当您尝试执行此操作时它会中断。尝试将两个“防弹”背景图像放在彼此之上也是如此。它并没有结束。

Answer 2

您遇到问题的原因很可能是因为包含了＆＃34;防弹＆＃34;选项使用：

<v:textbox>

VML中的文本框只应包含非VML元素，即您可以;在文本区域中为形状添加其他形状。

<v:rect>
  <v:textbox>
    <v:roundrect>
    </v:roundrect>
  </v:textbox>
</v:rect>

这是对您目前拥有的内容的粗略表示，使用上述逻辑被视为无效。

您可以做的是使用VML图像来保存位于包含内容和按钮的HTML区域后面的背景图像。

<table width="640" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="position:relative;">
      <!--[if gte mso 9]>
      <v:image src="...yourbackgroundimage.jpg" style="position:absolute;top:0;left:0;z-index:-1;"
      <![endif]-->
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
            your content here, including your VML button
          </td>
        </tr>
      </table
    </td>
  </tr>
</table>

这种方法有一些严重的不灵活性，但它几乎是分层VML对象的唯一方法，而不会使用

的所有麻烦

<v:group>

请注意，当在VML元素上使用负z-index并在电子邮件正文上使用背景颜色时，图像将位于背景颜色后面：|

希望这有帮助。

编辑：

仅供参考另一个提到的点，堆叠背景图像。如果出于某种原因你有多个.png你想要叠加或者说例如在背景图像上放置一个roundel，你想在其上叠加文本。您可以在顶部堆栈中添加多个图像：

<table width="640" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="position:relative;">
      <!--[if gte mso 9]>
      <v:image src="...yourbackgroundimage.jpg" style="position:absolute;top:0;left:0;z-index:-1;" />
      <v:image src="...yourroundel.jpg" style="position:absolute;top:0;left:0;z-index:-2;" />
      <![endif]-->
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
            your content here, including your VML button
          </td>
        </tr>
      </table
    </td>
  </tr>
</table>

在Outlook中的HTML电子邮件模板中的背景图像上的CSS按钮不合适

2 个答案: