电子邮件：结合渐变与防弹背景 VML答案

【问题标题】：Email: combine gradient with bulletproof background VML电子邮件：结合渐变与防弹背景 VML
【发布时间】：2016-12-09 15:23:13
【问题描述】：

我找不到为背景图片添加渐变的最佳方法。正如大多数电子邮件设计师所发现的那样，Outlook 是唯一给我带来问题的电子邮件客户端。

我无法将此渐变添加到 Photoshop 中的图像。此背景图像将根据谁打开电子邮件而动态变化。

我尝试嵌套背景和渐变，但发现很难做到这一点。所以现在我想知道我是否可以在同一个 VML 填充元素中拥有背景图像和渐变。

这是我的背景图片：

<!--[if gte mso 9]>
   <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px;height:407px; background-position: center center !important;">
   <v:fill type="tile" src="http://i.imgur.com/Z0d2QCI.jpg"
   <v:textbox inset="0,0,0,0">
<![endif]-->

我可以添加第二个填充元素吗？

<v:fill type=gradient color="#ffffff" color2="#000000" opacity="0%" opacity2="100%" />

此渐变应为黑色到透明，顶部为黑色，底部为 0% 透明。我希望它看起来像这样：

【问题讨论】：

您不能在每个动态变量 img 的托管位置添加渐变吗？
@RichardClifford 不幸的是，由于一些原因，我无法为每张图像添加渐变，主要原因是图像数量。这是一个家庭搜索网站，那里的房产来去匆匆，所以我们无法证明将这种影响应用于一个电子邮件活动的每个图像的投资是合理的。最终，我们改变了设计，因为这种影响不起作用。

标签： html css email html-email vml

【解决方案1】：

我不认为将第二个填充或背景图像添加到同一元素并让它在 Outlook 中工作，但您可以尝试像这样嵌套背景图像：

<!-- First Background : BEGIN -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
        <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]-->
      <div>

        <!-- Second Background : BEGIN -->
        <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
            <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top">
              <!--[if gte mso 9]>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
                <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
              <![endif]-->
              <div>

                Content

              </div>
              <!--[if gte mso 9]>
                </v:textbox>
              </v:rect>
              <![endif]-->
            </td>
          </tr>
        </table>
        <!-- Second Background : END -->

      </div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>
<!-- First Background : END -->

【讨论】：

正如问题中已经提到的，嵌套背景图像将不起作用。这已经尝试过了。在 Outlook 2007、2010 和 2013 中，第二个背景填充将被抵消，并显示在电子邮件的左上角。
不能嵌套，但可以使用绝对定位。如果您完全关闭第一个 VML，然后执行第二个（这样它就不会嵌套），您也许可以将一个放在另一个上（未经测试）。请参阅我在背景上为 VML 按钮所做的操作：stackoverflow.com/a/70179090/8942566
Desktop Win Outlook doesn't support position，所以绝对定位不起作用。