HTML 电子邮件模板不再在 Outlook 365 中显示背景图像答案

【问题标题】：HTML Email Template not showing background image in Outlook 365 anymoreHTML 电子邮件模板不再在 Outlook 365 中显示背景图像
【发布时间】：2021-08-01 06:27:09
【问题描述】：

我有一个 HTML 模板，其中包含重复的背景图片，并且图片托管在 https://imgbb.com/ 上（图片如下：https://i.ibb.co/NKYLjxT/topography-compressed.png）。

这是 HTML：

<!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' lang='en-GB'>
<head> 
  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/> 
  <title>NaviGATE
  </title> 
  <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
</head>
<body style='margin: 0; padding: 50px 0 50px 0; background: url(https://i.ibb.co/NKYLjxT/topography-compressed.png); font-family: sans-serif; line-height: 1.6'> 
  <table role='presentation' cellpadding='0' cellspacing='0' width='100%'> 
<tr> 
  <td> 
    <table align='center' border='1' cellpadding='0' cellspacing='0' width='600' style='border-collapse: collapse;'> 
      <tr> 
        <td> 
          <table style='border-collapse: collapse; width: 100%'> 
            <tr> 
              <td align='center' bgcolor='#ffffff' style='padding: 40px 0 30px 0;'> 
                <img src='###company logo###' alt='' width='300' style='display: block;'/> 
              </td>
            </tr>
            <tr> 
              <td bgcolor='#ffffff' style='padding: 40px 30px 40px 30px;'> 
                <p style='margin: 0;'>BODY OF EMAIL
                  <br/>
                  <br/> 
                </p>
              </td>
            </tr>
            <tr> 
              <td bgcolor='#2f3c48' style='padding: 10px 30px 10px 30px;'> 
                <p style='margin: 0;'>
                  <a href='#homepage#' style='color: #ffffff'>internal home page
                  </a>
                </p>
              </td>
            </tr>
          </table> 
        </td>
      </tr>
    </table> 
  </td>
</tr>
  </table>
</body>
</html>

在 Outlook 365 中查看电子邮件时，最初不会显示背景图像。 但是当调整窗口大小时，它会像正常显示一样。在另一台使用 Outlook 365 的计算机上的行为相同。在 Gmail 上一切正常。

我可以在 HTML 中做一些不同的事情来强制它显示吗？

我已经尽可能地压缩了图像。我尝试使用图像的矢量在内联 CSS 中使用它，但它不起作用（代码很庞大）。我试过用 Base64 编码，也没有运气。

我不认为这是 Outlook 设置，因为大约一个月前，当我最初测试模板时，它看起来很正常。也许最近的补丁打破了它？我不知道。使用Version 2104 (Build 13929.20296)

【问题讨论】：

标签： html css email outlook html-email

【解决方案1】：

Outlook 不支持背景属性（仅当有 URL 时）。事实上，Outlook 使用 Word 来呈现邮件正文。在Word HTML and CSS Rendering Capabilities in Outlook 文章中阅读有关支持和不支持的 HTML 元素、属性和级联样式表属性的更多信息。

【讨论】：

感谢您的回复。您发布的文章适用于 Outlook 2007，因此不适用于我的特定问题。 Outlook 365 is able to support background images.
Outlook.com 和 Outlook for Desktop 是不同的东西！文章中描述的规则可以应用于所有 Outlook 版本。尝试使用 Word 显示您的标记。
好的，我知道，我使用的是 Outlook 2014。我尝试使用 Word 显示我的标记，但它也不起作用。但是当我调整消息窗口的大小时，Outlook 确实会按预期显示标记。此外，两周前我第一次测试它时，它只是按我预期的方式显示。不确定发生了什么变化，但我会看看这篇文章是否会对我有所帮助并发布我的发现。