Шаблон электронной почты - фоновое изображение таблицы не отображается в MS Office Outlook 365 - PullRequest
Новая
       4

Шаблон электронной почты - фоновое изображение таблицы не отображается в MS Office Outlook 365

0 голосов
/ 14 февраля 2020

Для шаблона электронной почты мне нужно внедрить фоновое изображение в <table> и содержать текст поверх изображения. Сейчас я попробовал:

{ ссылка }

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6"/>
</v:background>
<![endif]-->

Не работают последние версии MS Outlook (Version 16005.11029.20108.0 & Version 1908 Build 11929.20562),

Но отлично работает со старыми версиями.

Есть какой-нибудь новый метод для решения этой проблемы?

Ответы [ 2 ]

1 голос
/ 14 февраля 2020

Вы пытались объявить, что VML имеет это в вашем html теге? 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
        xmlns:v="urn:schemas-microsoft-com:vml"
        xmlns:o="urn:schemas-microsoft-com:office:office">

Кроме того, каковы размеры вашего bg img? Outlook имеет максимальную высоту img 1728 пикселей и не будет отображать изображение, если оно превышает это. И он не будет отображаться правильно, если bg img - сетчатка.

0 голосов
/ 20 февраля 2020

Нашел это решение

От: https://litmus.com/community/discussions/357-outlook-07-13-full-width-background-image

Это работает в Outlook, Office 365, Gmail et c. также на обычных экранах и экранах 4k. 

<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <title>Test</title>
  <style>
    v\:* {
      behavior: url(#default#VML);
      display: inline-block
    }
    
    o\:* {
      behavior: url(#default#VML);
      display: inline-block
    }
    
    w\:* {
      behavior: url(#default#VML);
      display: inline-block
    }
    
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      -webkit-text-size-adjust: none !important;
      -ms-text-size-adjust: none !important;
    }
  </style>

  <!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->

</head>

<body style="padding: 0; margin: 0; -webkit-text-size-adjust: none !important;color:#fff;font-family:sans-serif;font-size: 18px;">
  <table cellspacing="0" cellpadding="0" border="0" bgcolor="#0058a5" width="100%">
    <tr>
      <td height="50">&nbsp;</td>
    </tr>
  </table>
  <table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td height="150" bgcolor="#0086cc" background="http://i.imgur.com/HzZCJei.png" style="height: 150px;" align="center">
        <!--[if gte mso 9]>
        <v:rect stroke="f" fill="t" style="mso-width-percent: 1000;height:150px; position: relative; z-index: 0; mso-width-relative:margin;">
        <v:fill type="frame" src="http://i.imgur.com/HzZCJei.png" color="#0086cc" />
        </v:rect>
        <![endif]-->
        Text goes here!
      </td>
    </tr>
  </table>
</body>

</html>
...