Office 365 电子邮件背景 image/gradient 或 VML tile/gradient

Question

Office 365 的 EmailOnAcid 代码分析表明不支持 shorthand (background: url("foo.png");) 或显式 (background-image: url("foo.png");) 格式的背景图像，也不支持TD 元素的背景属性。除了这些样式之外，我还有针对 [if gte mso 9] 的 VML 代码。

在我的一些测试中，我看到了我的背景图像，但当我从 image/VML 平铺切换到线性 gradient/VML 渐变时却看不到。这是 Office 365 最近添加某种图像支持的问题，还是 Office 365 不支持 VML 渐变？

带图片的电子邮件代码：（注意：此处显示的图片带有 cid 参考；测试结果主要使用托管在 imgr.com 上的图片)

<head>
  <style>
    table.with-bg {
      width: 570px;
      min-height: 717px;
    }

    table.with-bg td.image-container {
      padding: 10px;
      background: url("cid:mailing_footer") repeat-x;
    }
  </style>
</head>

<body link="#497cbe" vlink="#497cbe" alink="#497cbe">
  <table class="with-bg" cellpadding="10" cellspacing="0" border="0" width="570" height="717">
    <tbody>
      <tr>
        <td class="image-container" background="cid:mailing_footer" bgcolor="transparent" valign="top" width="570" height="717">
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:570px;height:717px;">
            <v:fill type="tile" src="cid:mailing_footer" color="#ffffff" />
            <v:textbox inset="0,0,0,0">
          <![endif]-->
          <div>
            <table cellpadding="0" cellspacing="0" border="0" width="570" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
              <tbody>
                <tr>
                  <td width="10">&nbsp;</td>
                  <td>
                    <table cellpadding="0" cellspacing="0" border="0" width="550">
                      <tbody>
                        <tr>
                          <td colspan="2" align="left" bgcolor="transparent">
                            &nbsp; 
                          </td>
                        </tr>
                        <tr>
                        <td colspan="2" align="center" bgcolor="transparent"><img id="headerpic" src="cid:mailing_header" width="468" height="71" alt=" " title=" " style="width:468px; height: 71px;"></td>
                        </tr>
                        <tr> 
                          <td colspan="2" class="body" style="min-height:200px;">
                            CONTENT GOES HERE
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                  <td width="10">&nbsp;</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!--[if gte mso 9]>
            </v:textbox>
          </v:rect>
          <![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</body>

渐变更改：

<head>
  <style>
    ...

    table.with-bg td.image-container {
      padding: 10px;
      background-color: white;
      background-image: -webkit-linear-gradient(left, #b6cae8, #ffffff);
      background-image: -moz-linear-gradient(left, #b6cae8, #ffffff);
      background-image: -o-linear-gradient(left, #b6cae8, #ffffff);  
      background-image: linear-gradient(#b6cae8, white);
      background: linear-gradient(#b6cae8, white);
    }
  </style>
</head>
<body link="#497cbe" vlink="#497cbe" alink="#497cbe">
    ...
        <td class="image-container" background="linear-gradient(#b6cae8, white);" bgcolor="transparent" valign="top" width="570" style="background-color: white; background-image: -webkit-linear-gradient(left, #b6cae8, #ffffff); background-image: -moz-linear-gradient(left, #b6cae8, #ffffff); background-image: -o-linear-gradient(left, #b6cae8, #ffffff);  background-image: linear-gradient(#b6cae8, white); background: linear-gradient(#b6cae8, white);">
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:570px;">
            <v:fill type="gradient" color="#ffffff" color2="#b6cae8" />
            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
          <![endif]-->
    ...
</body>

Answer 1

他们还直接通过 Email On Acid 提出了这个问题，他们回应说 Office 365 似乎已经添加了对 TD 背景属性的支持，并且他们更新了代码分析以反映这一点。

目前似乎不支持渐变，CID 图像路径也不支持。图片的绝对 URL 有效，例如 <td background="http://foo.com/bar.jpg">。运行通过 ZIP 文件上传对 EOA 进行手动测试时，相对路径也有效 (<td background="bar.jpg">)，尽管我不清楚 if/how 在正常发送的电子邮件中是否有效。

注意：Office 365 和 OWA 不使用 VML，更重要的是，它们不匹配 mso 条件注释！

Office 365 电子邮件背景 image/gradient 或 VML tile/gradient

Office 365 email background image/gradient or VML tile/gradient

html

css

email

vml

office365