Используйте фоновое изображение и центр без зазора для Outlook - PullRequest
Новая
       59

Используйте фоновое изображение и центр без зазора для Outlook

2 голосов
/ 03 апреля 2019

Поскольку использование фоновых изображений в письме в формате HTML для outlook 2007-2016 не поддерживается CSS, я попытался обойти это с помощью VML :

Это мой DOM до использования VML: 

<table width="100%" align="center" height="227" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td align="center" bgcolor="#F4C046"   
           style="background-image: url('../image.jpg');
                  background-repeat: no-repeat;
                  background-size: cover; 
                  background-position: center;
                  background-color:#F4C046;border:solid">
      <table width="600" border="0" cellpadding="0" cellspacing="0">
       <!--- some content -->
      </table>
    </td>
  </tr>
</table>

Теперь это работает для большинства почтовых клиентов, но в outlook 2007-2016 фоновое изображение игнорируется, а при рендеринге без цвета фона выглядит так:

enter image description here

Когда я пытаюсь использовать решение "VML", мой код выглядит следующим образом: 

<table width="100%" align="center" height="227" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td align="center" bgcolor="#F4C046"   
           style="background-image: url('../image.jpg');
                  background-repeat: no-repeat;
                  background-size: cover; 
                  background-position: center;
                  background-color:#F4C046;border:solid">
    <!--[if gte mso 9]>
     <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
        <v:fill type="frame" src="../myimg.jpg" color="#F4C046" />
            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
            <![endif]-->    
      <table width="600" border="0" cellpadding="0" cellspacing="0">
       <!--- some content -->
      </table>
    <!--[if gte mso 9]>
                </v:textbox>
            </v:rect>
            <![endif]-->
    </td>
  </tr>
</table>

Теперь фон работает, наведите таблицу, фон которой больше не центрирован.:

enter image description here

Также, если я уменьшу размер окна перспективы, появится пробел:

enter image description here

Я мог бы обернуть свой стол, который должен быть центрирован еще раз, заполненным столом, как это: 

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">   
  <tr>
    <td align="center">
      <table width="600" border="0" cellpadding="0" cellspacing="0">
        <!--- some content -->
      </table>
    </td>
  </tr>
</table>

, чтобы исправить центрирование:

enter image description here

Однако пробел все еще появляется:

enter image description here

Любая идея, как правильно использовать background изображение и центр контента, без проблемы разрыва?

1 Ответ

1 голос
/ 03 апреля 2019

Не уверен, что не так с вашим кодом, но, может быть, вы можете использовать это, я нашел в старом письме, которое я сделал. Это работает с перспективой 2010,13,16. Я надеюсь, что это поможет вам.

Примечание: не возражайте против всех классов :) 

<table bgcolor="#efefef" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
      <tr>
        <td align="center">
          <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"
            class="w394 w355-413 w300-374" width="640">
            <tbody>
              <tr>
                <td align="left" background="https://placeimg.com/640/540/arch" bgcolor="#efefef"
                  class="w394 w355-413 w300-374 break h400" height="540"
                  style="background-size:640px 960px;repeat:no-repeat;" width="640">
                  <!--[if gte mso 9]>
                      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:540px;">
                      <v:fill type="tile" src="https://placeimg.com/640/540/arch" color="#efefef" />
                      <v:textbox inset="0,0,0,0">
                      <![endif]-->
                  <div>
                    <table align="center" border="0" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <td height="50">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>
                    <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"
                      class="w280 w240-413" valign="middle" width="320">
                      <tbody>
                        <tr>
                          <td align="center" class="f28"
                            style="padding:20px;font-size:36px;line-height:40px;font-family: Arial;font-weight: 400;color:#be1f24;"
                            valign="top">Lorem <b>IPSUM</b> dolor <b>sit </b>amet</td>
                        </tr>
                      </tbody>
                    </table>
                    <table align="center" border="0" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <td height="50">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>
                    </div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>    
    </tbody>
  </table>
...