Question

我想将以下页面作为html电子邮件发送。它在网络上显示正常，但在电子邮件中，红色背景不显示正文或页面底部的按钮。我在这里想念的是什么？ HTML电子邮件给了我很多麻烦！感谢您的帮助！

http://www.americanvineyardmagazine.com/emails/AVvid14email.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>American Vineyard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>

 <style type="text/css">
th td tr {
    text-align: center; 
}
 </style>

 <body style="padding: 0;background-color:#800000">



  <table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">
     <th style="color:#800000; width:650px;"><h1>New Video On American Vineyard Website!</h1></th>
     <tr>
         <td style="text-align:center;">
            <a href="http://www.americanvineyardmagazine.com/index.html#modal-video14">
                <img src="http://americanvineyardmagazine.com/images/video.play.png"  alt="http://americanvineyardmagazine.com/images/featvideos/featvideo14.jpg" width="300px" style="background:URL(http://www.americanvineyardmagazine.com/images/featvideos/featvideo14.jpg) center center no-repeat;">
            </a>
        </td>

     </tr>
    <tr>
        <td style="text-align:center; color:#800000; ">
            <h2><em>El Niño Amplifies Risk for Vine Canker Disease </em></h2>
        </td>       
     </tr>
    <tr>
        <td style="text-align:center; color:#800000; ">
        <h5>With El Niño coming strong for the next few months, grape growers are grateful for the drought relief; however, pruning is going to be a difficult task this winter with increased disease pressure. Doug Gubler, UC Davis Plant Pathologist addressed this at the SJV Grape Symposium.</h5>
        </td>       
    </tr>


   <tr>
     <td style="text-align:center;padding-bottom:35px;">


         <a href="http://www.americanvineyardmagazine.com#modal-video14" style="background-color:#800000;border:1px solid #800000;border-radius:3px;color:#FFFFCC;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">Watch Now!</a>

     </td>
   </tr>


  </table>


 </body>




 </html>

Answer 1

问题出在桌子的背景路径中。你在这里使用相对路径..

  <table align="center" style="background-image:url(../images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">

它将在网络上正确显示，因为浏览器将能够解决该问题。但是当您在电子邮件中使用它时，电子邮件客户端将无法解决该问题。

请改用绝对路径。

<table align="center" style="background-image:url(http://www.americanvineyardmagazine.com/images/intro.png); max-width:650px;background-color:#800000" cellpadding="0" cellspacing="0">

Answer 2

在正文标记.wrapper {background-color: #800000;}

下使用父类

HTML电子邮件BG颜色问题

2 个答案: