Как вставить фоновое изображение в HTML письмо для OUTLOOK - PullRequest
Новая
       35

Как вставить фоновое изображение в HTML письмо для OUTLOOK

0 голосов
/ 24 января 2019

У меня проблемы с фоновым изображением моей электронной почты в Outlook.Он не полностью загружен.

Я пытался использовать код, предоставленный на bulletproof.com в vml, но безуспешно.

Это код, который я использую: 

<body style="margin: 0; padding: 0;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
      <tr>
        <td background="http://image" style="background-image: url(http://image);">
          <!--[if(gte mso 9)|(IE)]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" 
             style=" border: 0;display: inline-block; width: 525pt; height: 825.25pt;" 
             src="http://image" />
             <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" 
             style=" border: 0;display: inline-block;position: absolute; width: 525pt; 
             height: 825.25pt;">
             <v:fill  opacity="0%" color="#f7901e"  />
             <v:textbox inset="0,0,0,0">
              <![endif]-->
          <div>
            ........
          </div>
          <!--[if(gte mso 9)|(IE)]>
               </v:textbox>
               </v:fill>
               </v:rect>
               </v:image>
            <![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</body>

Кто-нибудь может мне помочь?

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Если это не работает для вас, либо проблема с вашим изображением, либо неправильное отображение разрешений для вашего размещенного изображения, либо что-то еще в вашем коде. 

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 600px; background-position: center center !important;">
<v:fill type="tile" src="https://i.stack.imgur.com/ZkQH8.jpg" />
  <v:textbox inset="0,0,0,0">
<![endif]-->

<p>**Content Goes Here**</p>

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

Что следует сделатьсм. в Outlook 2007-2019 изображение ниже в квадрате 600x600px.

background image

Удачи.

0 голосов
/ 24 января 2019

Попробуйте, я никогда не видел тег, используемый для фоновых изображений - просто прямоугольник с фоновым изображением. 

<td valign="top" align="center" background="IMAGEURL">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:525pt;height:825.25pt;">
<v:fill type="tile" src="IMAGEURL" color="#FALLBACK COLOUR"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
   <div>CONTENT</div>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->

Как уже говорилось, мы рисуем прямоугольник с фоновым изображением, а не с прямоугольником и изображением. Не забудьте изменить URL-адреса изображений и запасной цвет. Если ваш контент выглядит немного шатко, вы также можете поиграть со вставкой для текстового поля, которая действует как отступ. В отличие от отступов - значения идут влево, вверх, вправо, вниз (в отличие от стандартного верхнего, правого, нижнего, левого).

...