Outlook 中的背景图像问题

Question

我正在为时事通讯创建一个新模板。下面的代码生成了我想要看到的内容，但众所周知，背景图像在 Outlook 中效果不佳。

<table style="width: 600px;" align="center" border="0">
  <tbody>
    <tr>
      <td style="height: 60px; padding: 5px; border-radius: 5px 5px 0px 0px; vertical-align: middle; background-color: white;"

        background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png">
        <p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
            SUBJECT HEADING</strong><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"

            align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"

            align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png"

            align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png"

            align="right"></p>
      </td>
    </tr>
  </tbody>
</table>

Intended result

我在这里找到了建议使用 https://backgrounds.cm/ 的答案，所以这是我取回的代码。

    <table style="width: 600px;" align="center" border="0">
      <tbody>
        <tr>
         <td background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" bgcolor="#929292" width="600" height="61" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:61px;">
    <v:fill type="tile" src="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" color="#929292" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
            <p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
                SUBJECT HEADING</strong><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"

                align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"

                align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png"

                align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png"

                align="right"></p>
            </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
        </tr>
      </tbody>
    </table>

哪个在 Outlook 中给我这个

Outlook Weirdness

我试图解决这个问题，但我不是一个特别熟练的程序员。我通常可以凭直觉知道问题出在哪里，但我在这里不知所措。

灰色条肯定需要作为背景图像，因为我需要在顶部放置文本和图像（较小的图像将在稍后阶段作为链接）。

希望大家帮帮忙

Answer 1

图像通常是行内元素，而不是块。您不能使内联元素向左或向右“对齐”。因此，将它们放在诸如段落之类的块中似乎可以直观地解决该问题，只是需要通过该块元素（在本例中为段落）进行对齐。

由于您希望文本左对齐而图像右对齐，我们确实需要两个块级元素，最好的方法是创建一个 table。

确保 table 达到可用 space 的完整宽度（width="100%"）。

我没有解决默认填充和其他默认设置，但这是可行的基本方法：

    <body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">

    <table style="width: 600px;" align="center" border="0">
      <tbody>
        <tr>
         <td background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" bgcolor="#929292" width="600" height="61" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:61px;">
    <v:fill type="tile" src="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" color="#929292" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
      <table width="100%">
          <tr>
              <td>
                  
      <p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
          SUBJECT HEADING</strong></p>
              </td>
              <td style="text-align: right;"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png" ><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png">
          </td>
          </tr>
      </table>
            </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
        </tr>
      </tbody>
    </table>
                
            
</body>

P.S。您可能认为您可以只向图像添加“display:block”，但 Outlook 不允许您这样做。它只会忽略该样式。

Outlook 中的背景图像问题

Background Image Issues in Outlook

html

css

outlook

html-email