2017-09-22 19 views
0

HTMLのOutlook電子メール署名のテキストの背後に背景画像を表示する方法はありますか?私はいくつかのリソースをオンラインでチェックし、VMLタグを使って提案したものもありましたが、これもうまくいきませんでした。署名のメインテーブルに背景イメージを使用するパッチまたは回避策を用意することは可能ですか?Outlook Html署名:背景画像

<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:[email protected]" target="_blank" style="color:#000000; text-decoration:none;"> 
            <span style="color:#000000; font-size:20px; font-family:calibri">[email protected]</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> 

答えて

1

メールの開発は、フロントエンドの開発ではありません。

Outlookで背景イメージを使用する唯一の方法は、vmlコードを使用することです。私たちの残りの人はそれを使って興奮しているわけではありませんが、ほとんどのバージョンのOutlookで背景イメージを使用できる唯一の方法です。

私は、Outlookのすべてのバージョンを使用して、リトマスでこのコードをテストした:

<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で動作するようにする方法を考え出すことができた場合は、電子メールの世界でヒーローになるだろう。

幸運。

+0

ご返信いただきありがとうございます。私はあなたの解決策を試しましたが、私の問題は、ブラウザで署名を生成してブラウザからOutlookの署名設定に直接貼り付けるPHPコードがあることです。 VMLコードでも背景画像。助言がありますか? – TechMafioso

0

私はこれに取り組みました。そして、私はそれをやり遂げることができました。 Htmlファイルは2013年のOutlookで完璧に動作します。お楽しみください。

FINAL RESULT

 <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:[email protected]" value="" target="_blank"> 
 
<span style="font-size:10.0pt;font-family:&quot;Verdana&quot;,sans-serif;color:#A2A2A2;text-decoration:none">[email protected]</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="[email protected]@[email protected]@[email protected]@[email protected]@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>

+0

誰かに実際にそれを読ませたい場合は、フォーマットして単純化してください。このコードを手入力しなかった場合は、そのコードを入手するために行ったことを説明してください。 – chharvey