HTML 电子邮件 - 防弹背景图片

Question

我正在编写 HTML 电子邮件。我有一个包含背景图像的 td。它在 Windows 上的所有主要电子邮件客户端栏 Outlook 中呈现。我选择使用http://backgrounds.cm/ 作为解决方法。我的问题是图像的高度和宽度与输入的值不对应。图像看起来被压扁了。我将它用作嵌套表的一部分。

<td class="full" width="300px" style="width: 300px;">
  <table>
    <tr>
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" bgcolor="#7bceeb" valign="top">
            <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000; width: 200px; height: 200px;">
                        <v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" />
                        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                        <![endif]-->
            <div style="width: 200px; height: 200px;">
            </div>
            <!--[if gte mso 9]>
                        </v:textbox>
                        </v:rect>
                        <![endif]-->
          </td>
        </tr>
      </table>
    </tr>
    <table>
</td>

Answer 1

我现在正在努力让它工作。
看起来图像本身的默认值是 567 x 341。

我认为这可能有效

<td class="full" width="300px" style="width: 300px;">
<table>
<td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" width="200" height="200" bgcolor="#7bceeb" valign="top">
<tr>
  <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
                 <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000; width: 200px; height: 200px;">
                    <v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" />
                    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                    <![endif]-->
        <div style="width: 200px; height: 200px;">
        </div>
        <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
      </td>
    </tr>
  </table>
</tr>
<table>

Answer 2

更强大的方法是使用 CSS 'background-image' 属性 - HTML 属性 'background' 仍然有效，但它在技术上已被贬值。背景属性也不允许您调整图像大小，因此这可能是您看到的问题。

就个人而言，这是我通常的处理方式：

<td align="center" style="background-image: url('http://path.to/image.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; background-color: your-colour;"></td>

其他属性是停止背景图像重复，定位图像顶部和中心，并将其拉伸以覆盖分配的空间 - 如果图像不是自动的，'background-color' 属性只是一个备用颜色渲染，以保持整体设计美感。

这里有一篇很棒的试金石文章：

https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email

希望这会有所帮助！