【问题标题】:Outlook Html Signature: Background ImagesOutlook Html 签名:背景图像
【发布时间】:2017-09-22 17:16:44
【问题描述】:

是否有任何可能的方法在 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>

【问题讨论】:

    标签: html outlook background-image signature


    【解决方案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 中部分起作用,因为它们不完全支持背景图像。

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

    祝你好运。

    【讨论】:

    • 感谢您的回复。我尝试了您的解决方案,但我的问题是我有一个 PHP 代码在浏览器中生成签名,供用户将其直接从浏览器复制粘贴到他们的 Outlook 签名设置,完成后,它仍然没有复制(显示)即使使用 VML 代码的背景图像。有什么建议吗?