背景图像不显示在Outlook 2013中

时间:2018-11-30 13:31:09

标签: html css email outlook vml

我在Outlook 2007/2010/2013中的背景图片有问题。

代码:

<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
    <tr>
        <td background="http://i.imgur.com/YJOX1PC.png" bgcolor="" width="500" height="150" valign="top">
            <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"                                                        style="width:100%;height:150px">
                <v:fill type="tile" src="http://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
                <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
            <![endif]-->
            <table cellpadding="0" align="center" cellspacing="0" border="0" height="100%" width="100%">
                <tr>
                    <td bgcolor="" valign="top" align="center">
                        <img width="320" style="width: 100%; max-width: 320px;height: auto;"                                                    src="https://7maravilhas.pt/wp-content/uploads/2015/11/turismo-2.png">
                    </td>
                </tr>
            </table>
            <!--[if gte mso 9]>
                </v:textbox>
                </v:rect>
            <![endif]-->
        </td>
    </tr>
</table>

我已经尝试过everithyng(高度,宽度,任何类型的代码)无效。

感谢您的帮助

4 个答案:

答案 0 :(得分:0)

您可以尝试以td的样式添加背景图片,如下所示:

 <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
      <tr>   

         <td background="http://i.imgur.com/YJOX1PC.png" border="0" cellpadding="0" cellspacing="0" height="150" width="500" style="background-image:url(http://i.imgur.com/YJOX1PC.png)" bgcolor="" width="600" height="325" valign="top">

          <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:325px;">
            <v:fill type="tile" src="http://i.imgur.com/YJOX1PC.png" border="0" cellpadding="0" cellspacing="0" height="150" width="500" style="background-image:url(http://i.imgur.com/YJOX1PC.png)" color="#7bceeb" />
            <v:textbox inset="0,0,0,0">
          <![endif]-->
          <table width="100%" height="100%" align="center"  border="0" cellspacing="0" cellpadding="0">

          </table>
          <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
        </td>
      </tr>
    </table>

有关更多信息,请参考以下链接:

Background Image Not Loading in Outlook 2013

Background Image on Windows/Outlook Not Displaying

答案 1 :(得分:0)

确保已在

中声明了此内容
<html xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">

我将此用于我的VML。它与您的相似,但我使用<!--[if gte mso]>而不是<!--[if gte mso 9]>

尝试一下:

<!--[if gte mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 640px"> <v:fill type="frame"
      src="http://i.imgur.com/YJOX1PC.png"
      color="#7bceeb"
      /> <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> <![endif]-->
       <div>

</div>
      <!--[if gte mso]><p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p></p> </v:textbox> </v:rect> <![endif]-->
    </td>
  </tr>
</table>

答案 2 :(得分:0)

重要的事情是:

  • 您使用.png,因此必须使用“ AllowPNG”声明它在Outlook中是允许的。
  • 在DOCTYPE和html中,您需要对VML进行一些额外的设置
  • 一些额外的CSS可以方便地重置vml元素(cs中的内容,例如v:* ...)

使用此模板作为起点:

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word">
<head>
  <!--[if (!mso)&(!ie)]>These<!-- --><!--<![endif]-->
  <!--[if (!mso)&(!ie)]>are<!-- --><!--<![endif]-->
  <!--[if (!mso)&(!ie)]>for<!-- --><!--<![endif]-->
  <!--[if (!mso)&(!ie)]>outlook<!-- --><!--<![endif]-->
  <!--[if (!mso)&(!ie)]>live<!-- --><!--<![endif]-->
  <!--[if (!mso)&(!ie)]>that<!-- --><!--<![endif]-->
  <!--[if (!mso)&(!ie)]>removes<!-- --><!--<![endif]-->
  <!--[if (!mso)&(!ie)]>the first<!-- --><!--<![endif]-->
  <!--[if (!mso)&(!ie)]>10 conditional<!-- --><!--<![endif]-->
  <!--[if (!mso)&(!ie)]>wellformed comments<!-- --><!--<![endif]-->
    <!--[if gte mso 9]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta property="og:title" content="The title" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width">
    <title>The title</title>
    <style type="text/css">
      v\:* {
        behavior: url(#default#VML);
        display: inline-block
      }
      o\:* {
        behavior: url(#default#VML);
        display: inline-block
      }
      w\:* {
        behavior: url(#default#VML);
        display: inline-block
      }
      .ExternalClass{
        width:100%;
      }
      .ExternalClass,
      .ExternalClass p,
      .ExternalClass span,
      .ExternalClass font,
      .ExternalClass td,
      .ExternalClass div {
        line-height: 100%;
      }
      body {
        width: 100% !important;
        min-width: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        margin: 0;
        Margin: 0;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      table{
        border-spacing: 0;
        border-collapse:collapse;
        mso-table-lspace:0pt;
        mso-table-rspace:0pt;
      }  
      img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        max-width: 100%;
        height: auto;
      }
      .ReadMsgBody{
        width:100%;
      }
      td {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
        border-collapse: collapse !important;
      }
      p
      {
        margin: 0 0 20px 0;
        Margin: 0 0 20px 0;
        margin-bottom: 20px;
        Margin-bottom: 20px;
      }
      @media only screen and (max-width: 600px) {
        .content-wrapper{
          width: 100% !important;
          max-width: 100% !important;
        }
        .gmail-fix {
          width: 0 !important;
          display: none !important;
        }
      }
      /* NO NORMAL CSS BETWEEN OR AFTER MEDIA QUERIES! they all get stripped in gmail */
    </style>
    </head>
    <body width="100%" style="margin:0; Margin: 0; padding:0;">
     <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="margin:0; Margin: 0; padding:0;">
      <!-- GMAIL fix, keep min 600px when no media queries supported and keep this on top of email -->
      <tr class="gmail-fix">
        <td>
          <table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="0" width="600" style="font-size: 0; line-height: 0; width: 600px; min-width: 600px; height: 0;">&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
      <td align="center" width="100%" valign="top">
        <!--[if (mso)|(ie)]>
        <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
          <tr>
            <td align="center" valign="top" width="600">
              <![endif]-->
              <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" class="content-wrapper" style="max-width:600px;">
                <tr>
                  <td align="center">
                    <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
                      <tr>
                        <td valign="top" background="http://i.imgur.com/YJOX1PC.png" style="background-repeat: repeat;">
                          <!--[if gte mso 9]>
                            <div>
                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height:225px;">
                              <v:fill type="tile" src="http://i.imgur.com/YJOX1PC.png" />
                              <v:textbox inset="0,0,0,0">
                                <![endif]-->
                                  <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                      <td align="center" height="150">
                                        Your content or a non-breaking-space if you leave td's empty
                                      </td>
                                    </tr>
                                  </table>
                                <!--[if gte mso 9]>
                              </v:textbox>
                            </v:rect>
                            </div>
                          <![endif]-->
                        </td>
                      </tr> 
                      </table>
                    </td>
                  </tr>
                </table>
                <!--[if (mso)|(ie)]>
              </td>
            </tr>
          </table>
          <![endif]-->
        </td>
      </tr>
    </table>
  </body>
</html>

答案 3 :(得分:-1)

随着Outlook 2007的推出和许多基于Web的电子邮件客户端,对背景图像的支持已基本删除。如果您知道您的联系人仅使用仍在渲染背景图像的电子邮件客户端,那么就去吧;但一般来说,请避免使用背景图片(使用CSS调用背景图片也不起作用。)