html - 图像没有拉伸为前景中的背景

Question

我正在尝试制作 html 时事通讯，但在 Outlook 2007 中从上到下拉伸图像。您可以看到背景颜色（#33ffff），我想让图像适合背景。我怎样才能做到这一点？

我正在使用 Outlook 2007 来测试我的 html 电子邮件通讯。

<table width="600" class="hp" border="0" cellpadding="0"  cellspacing="0">
   <tr>
      <td width="600" height="271" background="http://i.imgur.com/s9yj6UN.jpg" bgcolor="#33ffff" class="hp-m-h" style="width:600px; height:271px; background-image:url('http://i.imgur.com/s9yj6UN.jpg'); background-repeat:no-repeat; background-size:100% 100%; background-position:center center;">
         <!--[if gte mso 9]>
         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" width="100%" fill="true" stroke="false" style="width:600px; height:271px;">
            <v:fill type="frame" src="http://i.imgur.com/s9yj6UN.jpg" color="#33ffff"/>
            <v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
               <![endif]-->
               <div>
                  <table border="0" cellpadding="0"  cellspacing="0" width="560" class="ep" align="center" style="text-align:center;">
                     <tr>
                        <td style="color:#9933ff; padding:0px 0px 0px 0px; font-family:'Parisienne', Arial; font-size:44.02px; line-height:66.03px;" class="fallback-text">Make a</td>
                     </tr>
                     <tr>
                        <td style="color:#ffffff; padding:0px 0px 21px 0px; font-family:'Roboto', Arial; font-weight:900; font-size:35.22px; line-height:52.83px;" class="fallback-text">RESERVATION</td>
                     </tr>
                     <tr>
                        <td style="padding:0px 0px 0px 0px;">
                           <table border="0" cellpadding="0" cellspacing="0" align="center">
                              <tr>
                                 <td style="font-family:'Roboto', Arial; font-weight:400; font-size:12.86px; line-height:19.29px; padding:10px 21px 10px 21px; background:#9933ff;"><a href="http://www.website.com" style="color:#ffffff; text-decoration:none;" class="fallback-text">MAKE A RESERVATION</a></td>
                              </tr>
                           </table>
                        </td>
                     </tr>
                  </table>
               </div>
               <!--[if gte mso 9]>
            </v:textbox>
         </v:rect>
         <![endif]-->
      </td>
   </tr>
</table>

标签： htmlcssoutlook

Answer 1

进入 CSS 文件 .hp {

背景图片：网址（“网址”）；}