html - 如何创建将显示在 Outlook 电子邮件中的线性渐变背景

Question

我想添加一个线性渐变作为我正在设计的时事通讯的背景，但我在设置它时遇到了问题。

首先，我使用了带有 rgba 颜色的 CSS 线性渐变。它在 Apple Mail 的浏览器中工作，但不适用于 Outlook 和 Gmail。

然后我尝试使用 PNG 作为背景图像，覆盖所有视口(viewport)。它适用于 Apple Mail、Safari、Gmail(桌面版)和 Gmail App，但不适用于 Outlook(移动、应用和桌面)。

然后我使用了在这里找到的代码 https://backgrounds.cm但它仍然无法正常工作，请参阅此屏幕截图:Outlook Desktop

我现在使用的图片背景是2000px*2000px。我试图改变大小，但它仍然是一样的。

这是我现在使用的代码:

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td background="http://www.danselouisb.fr/newsletter/newsletter1/img/compagnie_danse_louis_barreau_FD-02.png" bgcolor="#d7554e" valign="top" style="-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">
      <!--[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="http://www.danselouisb.fr/newsletter/newsletter1/img/compagnie_danse_louis_barreau_FD-02.png" color="#d7554e" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div> 

      NEWSLETTER NEWSLETTER NEWSLETTER 

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

如何让后台在 Outlook 中正常工作？

Answer 1

这会起作用，对于不支持 VML 或线性渐变的那些，它将回退到单一颜色。

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td bgcolor="#001cb0" style="background:linear-gradient(-45deg, #00dfed 0%, #001cb0 100%);"><!-- Set fallback (bgcolor), and gradient -->
        <center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
            <!--[if (gte mso 9)|(IE)]>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" fillcolor="#00dfed"  style="width:450pt">
              <v:fill type="gradient" color2="#001cb0" angle="45" />
              <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
              <center>
                <![endif]--><!-- Set for Outlook, 450pt = 600px for 120DPI & normal DPI, as long as you have CSS for above -->
            <table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#ffffff;" role="presentation">
                <tbody>
                    <tr>
                        <td class="inner contents" style="border-collapse:collapse;padding-top:10px;padding-bottom:10px;padding-right:20px;padding-left:20px;width:100%;text-align:left;">
                            <h1 class="h1" style="magin:0;font-weight:bold;font-size:20px;magin-bottom:10px;text-align: center;color:#ffffff;">Background Gradients</h1>
                            <p style="magin:0;font-size:16px;magin-bottom:10px;color:#ffffff;">Works on all Apple/iOS, all Gmail, Outlook 2007-16, Samsung mail, and some others.</p>
                            <p style="magin:0;font-size:16px;magin-bottom:10px;color:#ffffff;">Doesn't work on Outlook.com (webmail) or Office 365, Outlook 2003 - however, in these cases, it will still show a single colour background of your choice. </p>
                            <p style="magin:0;font-size:16px;magin-bottom:10px;color:#ffffff;">The gradient could be applied to the whole row, or just the inner column (like now). Just move the bgcolor and style from the td, and the <!--[if .... --> code for Outlook to where you want it.</p>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!--[if (gte mso 9)|(IE)]>
            </center>
            </v:textbox>
            </v:rect>
            <![endif]-->
        </center>
    </td>
</tr>
</table>