Outlook Html 签名：背景图像

Question

是否有任何可能的方法在 HTML Outlook 电子邮件签名的文本后面显示背景图像。我在网上查了一些资源，有些人建议使用 VML 标签，我试过了也没有用。是否有可能有一个补丁或解决方法来为签名的主表使用背景图像。

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; width: 1705px; height: 356px; background-image: url(signature.jpg); background-repeat: repeat-y;" background="signature.jpg">
<tr>
    <td valign="top">
        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
            <tr>
                <td valign="top" style="padding-left:140px; padding-top:50px;">
                    <span style="color:#000000; font-size:22px; line-height: 20px; font-weight:bold; font-family:calibri"><b>Name</b></span><br>
                    <span style="color:#000000; font-size:20px; font-family:calibri">Consultant</span><br><br>
                    <span style="color:#000000; font-size:20px; font-family:calibri">P.O.Box Location</span><br>
                    <table cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
                        <tr>
                            <td valign=top>
                                <span style="color:#000000; font-size:20px; font-family:calibri"><strong>T:</strong></span>
                                <span style="color:#000000; font-size:20px; font-family:calibri">+001-123-456</span>
                                <br>
                                <span style="color:#000000; font-size:20px; font-family:calibri"><strong>D:</strong></span>
                                <span style="color:#000000; font-size:20px; font-family:calibri">+001-123-456&nbsp;</span>
                                <br>
                                <span style="color:#000000; font-size:20px; font-family:calibri"><strong>E:</strong></span>
                                <a href="mailto:hello@gmail.com" target="_blank" style="color:#000000; text-decoration:none;">
                                    <span style="color:#000000; font-size:20px; font-family:calibri">hello@gmail.com</span>
                                </a>
                            </td>
                            <td valign=top style='padding-left:20px'>
                                <span style="color:#000000; font-size:20px; font-family:calibri"><strong>M:</strong></span>
                                <span style="color:#000000; font-size:20px; font-family:calibri"></span>
                                <br>
                                <span style="color:#000000; font-size:20px; font-family:calibri"><strong>F:</strong></span>
                                <span style="color:#000000; font-size:20px; font-family:calibri;">+971 4 367 2892</span>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

Answer 1

电子邮件开发不是前端开发。

让背景图像在 Outlook 中工作的唯一方法是使用 vml 代码。我们其他人也不喜欢使用它，但它是让背景图像在大多数版本的 Outlook 中工作的唯一方法。

我使用每个版本的 Outlook 在 Litmus 中测试了这段代码：

<div style="background-color:#ff0000; width:600px;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
  </v:background>
  <![endif]-->
  <table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
      <h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
      Background Image with text on top
      </h1>
        </td>
    </tr>
  </table>
</div>
<p>
You can find most of this code at https://backgrounds.cm.</p>

<p>That picture really is me and Canaille the cat.</p>

它在 Outlook 10 邮件中不起作用，它在 2013 年和 2016 年重复出现，它将在 Gmail、AOL、Yahoo 中部分起作用，因为它们不完全支持背景图像。

• https://www.campaignmonitor.com/css/color-background/background/
• https://jsfiddle.net/wallyglenn/7zLaLrfx/

如果你能找到一种方法让它在没有 vml 的情况下在 Outlook 中工作，你将成为电子邮件世界的英雄。

祝你好运。