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

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

1 个答案: