Фоновое изображение не отображается в Outlook 2013 - PullRequest
Новая
       38

Фоновое изображение не отображается в Outlook 2013

0 голосов
/ 30 ноября 2018

У меня проблема с фоновым изображением в 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 голосов
/ 22 декабря 2018

Важными вещами являются:

  • Вы используете .png, поэтому вы должны объявить, что это разрешено в Outlook с «AllowPNG»
  • В вашем DOCTYPE и html вам нужно немногодополнительные настройки для VML
  • Некоторые дополнительные CSS удобны для сброса элементов vml (материал в CSS, например, 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>
0 голосов
/ 01 декабря 2018

Вы можете попробовать добавить background-image в стиле тд, например: 

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

Для получения дополнительной информации, пожалуйста, обратитесь по следующим ссылкам:

Фоновое изображение не загружаетсяв Outlook 2013

Фоновое изображение в Windows / Outlook не отображается

0 голосов
/ 03 декабря 2018

Убедитесь, что вы заявили это в своем 

<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>
0 голосов
/ 30 ноября 2018

С появлением Outlook 2007 и ряда почтовых веб-клиентов поддержка фоновых изображений в основном была удалена.Если вы знаете, что ваши контакты используют только почтовые клиенты, которые по-прежнему отображают фоновые изображения, сделайте это;но, как правило, избегайте использования фоновых изображений (использование CSS для вызова фоновых изображений также не работает.)

...