Outlook Html签名:背景图像

时间:2017-09-22 17:16:44

标签: html outlook background-image signature

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

2 个答案:

答案 0 :(得分: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中运行,你就会成为电子邮件世界的英雄。

祝你好运。

答案 1 :(得分:0)

我为此工作,最后,我能做到。 Html文件在outlook 2013中完美运行。享受它。

FINAL RESULT

&#13;
&#13;
        <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="Generator" content="Microsoft Word 15 (filtered medium)"><!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
  {font-family:"Cambria Math";
  panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
  {font-family:Calibri;
  panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
  {font-family:Verdana;
  panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
  {margin:0in;
  margin-bottom:.0001pt;
  font-size:11.0pt;
  font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
  {mso-style-priority:99;
  color:#0563C1;
  text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
  {mso-style-priority:99;
  color:#954F72;
  text-decoration:underline;}
span.EmailStyle17
  {mso-style-type:personal-compose;
  font-family:"Calibri",sans-serif;
  color:windowtext;}
.MsoChpDefault
  {mso-style-type:export-only;
  font-family:"Calibri",sans-serif;}
@page WordSection1
  {size:8.5in 11.0in;
  margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
  {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1027" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang="EN-US" link="#0563C1" vlink="#954F72"><div class="WordSection1"><p class="MsoNormal"><o:p>&nbsp;</o:p></p><table class="MsoNormalTable" border="0" cellpadding="0" width="100%" style="width:100.0%"><tr style="height:225.0pt">
<td width="100%" style="margin-left:14px; width:100.0%;height:225.0pt"><p class="MsoNormal"><br><br><br><br><br>
<span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif">
<a href="tel:+964%750%304%25%36" value="+9647503042536" target="_blank">
<span style="font-size:10.0pt;font-family:&quot;Verdana&quot;,sans-serif;color:#A2A2A2;text-decoration:none">+964 750 304 25 36</span></a><br>
<span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif">
<a href="mailto:wm@merapharmagmbh.com" value="" target="_blank">
<span style="font-size:10.0pt;font-family:&quot;Verdana&quot;,sans-serif;color:#A2A2A2;text-decoration:none">wm@merapharmagmbh.com</span></a><br>
<span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif">
<a href="https://wego.here.com/directions/mix/mylocation/e-eyJuYW1lIjoiTWVyYSBQaGFybWEgR21iSCIsImFkZHJlc3MiOiJCXHUwMGY2c2NoIFN0cmFzc2UgNzMsIDYzMzEgSFx1MDBmY25lbmJlcmcsIFp1ZywgU3dpdHplcmxhbmQiLCJsYXRpdHVkZSI6NDcuMTYxNzAxMiwibG9uZ2l0dWRlIjo4LjQ0MTAyOTUsInByb3ZpZGVyTmFtZSI6ImZhY2Vib29rIiwicHJvdmlkZXJJZCI6MjE5OTA3MzY4MTE5NDU0fQ==?map=47.1617,8.44103,15,normal&fb_locale=en_US" value="" target="_blank"><span style="padding-bottom: 20px; font-size:10.0pt;font-family:&quot;Verdana&quot;,sans-serif;color:#A2A2A2;text-decoration:none">Get Direction</span></a>

<br>

  <span style="font-size:20.0pt;line-height:20pt; display:inline-block; text-align:left; display: block;">
<a href="https://www.linkedin.com/in/graphrapture/"><img src="http://merapharmagmbh.com/HTMAIL/inb.png" width="20" height="20"></a>&nbsp;&nbsp;
<a href="https://twitter.com/MeraPharmaGmbH"><img src="http://merapharmagmbh.com/HTMAIL/tb.png" width="20" height="20"></a>&nbsp;&nbsp;
<a href="https://www.facebook.com/Merapharmagmbh/"><img src="http://merapharmagmbh.com/HTMAIL/fb.png" width="20" height="20"></a>&nbsp;&nbsp;
<a href="https://www.youtube.com/channel/UCTS42-L3V0wd-fobwi9nIVw?view_as=subscriber"><img src="http://merapharmagmbh.com/HTMAIL/utb.png" width="20" height="20"></a>
</span>

</span>



<!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
<v:stroke joinstyle="miter" />
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0" />
<v:f eqn="sum @0 1 0" />
<v:f eqn="sum 0 0 @1" />
<v:f eqn="prod @2 1 2" />
<v:f eqn="prod @3 21600 pixelWidth" />
<v:f eqn="prod @3 21600 pixelHeight" />
<v:f eqn="sum @0 0 1" />
<v:f eqn="prod @6 1 2" />
<v:f eqn="prod @7 21600 pixelWidth" />
<v:f eqn="sum @8 21600 0" />
<v:f eqn="prod @7 21600 pixelHeight" />
<v:f eqn="sum @10 21600 0" />
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" />
<o:lock v:ext="edit" aspectratio="t" />
</v:shapetype><v:shape id="Rectangle_x0020_2" o:spid="_x0000_s1026" type="#_x0000_t75" alt="http://www.merapharmagmbh.com/HTMAIL/sigbg.jpg" style='position:absolute;margin-left:-16.5pt;margin-top:0;width:427.5pt;height:135pt;z-index:-251657216;visibility:visible;mso-wrap-style:square;mso-width-percent:0;mso-height-percent:0;mso-wrap-distance-left:0;mso-wrap-distance-top:0;mso-wrap-distance-right:9pt;mso-wrap-distance-bottom:0;mso-position-horizontal:absolute;mso-position-horizontal-relative:text;mso-position-vertical:absolute;mso-position-vertical-relative:text;mso-width-percent:0;mso-height-percent:0;mso-width-relative:margin;mso-height-relative:page'>
<v:imagedata src="http://www.merapharmagmbh.com/HTMAIL/mrwt.jpg" o:title="sigbg" />
<o:lock v:ext="edit" aspectratio="f" />
</v:shape><![endif]--><![if !vml]><span style="display:inline-block; mso-ignore:vglayout;position:absolute;z-index:-1895824384;margin-left:-22px;margin-top:-150px;width:570px;height:180px"><img width="570" height="180" src="http://www.merapharmagmbh.com/HTMAIL/mrwt.jpg" alt="http://www.merapharmagmbh.com/HTMAIL/sigbg.jpg" v:shapes="Rectangle_x0020_2"></span><![endif]><span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif"><o:p></o:p></span></p></td></tr></table><p class="MsoNormal"><o:p>&nbsp;</o:p></p><p class="MsoNormal"><o:p>&nbsp;</o:p></p><p class="MsoNormal"><o:p>&nbsp;</o:p></p></div></body></html>
&#13;
&#13;
&#13;