Question

我拿了一个模板并对其进行了定制。我添加了背景颜色，当我在Chrome中加载 .html 文件时，它会显示在Chrome中，但是当我尝试使用Outlook加载时，背景颜色不会显示。我环顾四周，但我是HTML的新手，所以我不清楚如何将这些答案应用到我的具体情况，特别是因为我没有写完所有这些代码，我得到了这个工作。

${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>

前景中的背景显得很白，其他一切都很好。我希望背景颜色是海军色。

Answer 1

背景显示为白色，因为您有

background-color: #fff;

将#fff白色更改为您想要的其他颜色。

尝试，例如：

background-color: #0E061C;

背景颜色在Outlook中不起作用

1 个答案: