2017-12-10 21 views
-1

テンプレートを作成してカスタマイズしました。 Chromeに.htmlファイルを読み込んだときに背景色が追加されましたが、これをOutlookで読み込んだときに背景色が表示されません。私は周りを見回しましたが、私はHTMLに慣れていないので、特に私がこのコードをすべて書いたわけではないので、これらの答えを自分の状況に適用する方法を静かには理解していませんでした。Outlookで背景色が機能しない

${config_styles_link(color: #227700; text-decoration: none !important)} 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 
    <head> 
 

 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 
    </head> 
 
    <body> 
 

 
    <table cellpadding="0" border="0" style="line-height: 1.2em; font-family: 
 
    'Helvetica Neue', Helvetica, Arial, sans-serif; border-spacing: 0px; font- 
 
    size: 100%; font-color: white; border: 0; background-color: #fff;" 
 
    cellspacing="0" width="100%"> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <table border="0" cellspacing="0" cellpadding="0" width="650" 
 
    align="center" style="line-height: 1.2em; font-family: 'Helvetica Neue', 
 
    Helvetica, Arial, sans-serif; border-spacing: 0px; font-size: 100%; 
 
    background-color: 252734; border: 1px solid #ccc; margin-top: 5px; margin- 
 
    bottom: 5px;" > 
 
      
 
    <tbody> 
 
       <tr> 
 
        <td style="padding: 16px 16px 0px 20px; vertical-align: middle; 
 
    font-size: 18px; color: grey;" align="left"> 
 
        </td> 
 
        <td width="200" style="padding:16px 16px 0px 14px;vertical- 
 
    align:middle; line-height:12px;" align="right"> 
 
        
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2" style="padding: 8px 16px 8px 20px;"> 
 
    <imgsrc="static.pexels.com/photos/11406/c12ee0f379643a278198b2086afd3b9c.jp"  
 
    style="width:600px;height:142px;"> 
 
    <p style= "color: D2D5EB">Hello ${user_first_name},</p> 
 
    <p style= "color: D2D5EB"> 
 
    We are looking forward to your participation in ${webcast_title}. 
 
    <div style="border:1px white; height: 60px; width: 180px; margin-left: 80px; 
 
    font-family: arial; font-size: 17px; font-weight: 600; color: D2D5EB; 
 
    background-color: 252734; clear:both;"> 
 
     ${webcast_details} 
 
    </div> 
 

 
    <img src="https://thumbs.dreamstime.com/z/skull-human-size-robot-isolated- 
 
    black-35652577.jpg" style="width:104px;height:142px;"> 
 

 

 

 
    </p> 
 
    <hr style="clear:both;"> 
 

 

 
    <p>&nbsp;</p> 
 

 
    <p style ="clear:both; color: D2D5EB;">You can test your system now to make 
 
    sure you can view our webinars and videos: ${help_viewers_systemtest}.</p> 
 

 
    <p style="color: D2D5EB;">${channel_webcasts}</p> 
 

 
    <p style ="font-family: arial; font-size: 11px; font-weight: 600; color: 
 
    grey; text-align: center;"> In the meantime you can check out our website by 
 
    clicking <a href="https://example.com/">here</a> for more 
 
    information about what we do, future events and to check out our blog!</p> 
 

 
    <p style="font-family: arial, sans-serif; font-size: 12px; color: 
 
    D2D5EB;">Thank you,<br /> 
 
        ${webcast_channel_title}</p> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td style="padding: 0px 16px 0px 20px; font-family: 
 
    Arial,Helvetica,sans-serif; color: #000; font-size: 11px; color: D2D5EB;"> 
 
        <p>You received this email because you are subscribed to <a 
 
    style="color: D2D5EB;; text-decoration: none !important" 
 
    href="${webcast_channel_url}&utm_content=channel">${webcast_channel_title} 
 
    </a> on BrightTALK.</p> 
 
        </td> 
 
        <td width="120" style="padding:4px 16px 0px 0px;vertical- 
 
    align:top;" align="right"> 
 
        <img title="BrightTALK" 
 
    src="https://p.brighttalk.com/platform_email/brighttalklogo.png" 
 
    alt="BrightTALK" width="120" height="34" /> 
 
        </td> 
 
       </tbody> 
 
      </table> 
 
      <table border="0" cellspacing="0" cellpadding="0" width="650" 
 
    align="center" style="padding: 0px 0px; line-height: 1em;"> 
 
       <tbody> 
 
       <tr> 
 
        <td style="padding-top: 0px; font-family: Arial,Helvetica,sans- 
 
    serif; color: #000; font-size: 11px; background-color: 252734;"> 
 
    <p style="font-size:11px; color: D2D5EB">All times are shown in your time 
 
    zone: ${user_timezone_alias}</p> 
 
        <p style="color: D2D5EB;">To update your email preferences, 
 
    please visit: ${user_link_preferences}<br /> 
 
         Should you wish to unsubscribe from this channel please 
 
    visit: ${user_link_mybrighttalk}</p> 
 
        <p style="color: D2D5EB;"> 
 
         For more information, please visit us at <a style="color: 
 
    #227700; text-decoration: none !important" 
 
    href="http://www.brighttalk.com">www.brighttalk.com</a> <br /> 
 
         BrightTALK&trade;, 501 Folsom Street, 2nd Floor, San 
 
    Francisco, CA 94105</p> 
 
        <p style="color: D2D5EB;">${email_unsubscribe_link}</p> 
 
        </td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </body> 
 
</html>

背景が見通しに白く、他のすべては、罰金をアップになります。背景色をネイビー色にしたい。あなたは

background-color: #fff; 

変更したい別の色の#FFF白い色を持っているので、

+0

あなたは '背景color'と' color'スタイルルールの進カラーコードのいくつかの前にハッシュ記号( '#'を)逃しています。 –

答えて

0

背景が白表示されます。例えば

してみてください:

background-color: #0E061C; 
関連する問題