Office 365电子邮件背景图像/渐变或VML图块/渐变

时间:2015-11-27 17:10:58

标签: html css email office365 vml

Office 365的EmailOnAcid代码分析表示不支持背景图像,无论是速记(background: url("foo.png");)还是显式(background-image: url("foo.png");)格式,都不支持{{{{{ 1}}元素。除了这些样式,我还有针对TD的VML代码。

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

使用图片发送电子邮件代码(注意:此处显示附加图片的[if gte mso 9]个参考;测试结果主要使用imgr.com上托管的图片)

cid

更改为渐变:

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

1 个答案:

答案 0 :(得分:0)

还直接使用Email On Acid提供了这一功能,他们回应说Office 365似乎已经添加了对TD背景属性的支持,并且他们更新了代码分析以反映这一点。

此时似乎不支持渐变,也不支持CID图像路径。图片的绝对网址可以使用,例如<td background="http://foo.com/bar.jpg">。通过ZIP文件上传在EOA上运行手动测试时,相对路径也起作用(<td background="bar.jpg">),虽然我不清楚它是否/如何在正常发送的电子邮件中起作用。

注意: Office 365和OWA不使用VML,更重要的是,它们不匹配mso条件注释!