html - Email:结合渐变与防弹背景VML

Question

我找不到向我的背景图像添加渐变的最佳方法。大多数电子邮件设计人员发现，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% 透明。我希望它看起来像这样:

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