Question

我正在发送面向Outlook 2007/2010的HTML格式的电子邮件。我将背景图像应用于body标签，但它不起作用。代码如下：

<body 
style="background-image: url('http://example.com/bg.jpg'); 
background-repeat: no-repeat;
background-position:top center;">

但是，如果我将“不重复”更改为“repeat-y no-repeat”，它会显示背景图像，但会重复。

任何人都可以帮我吗？

Answer 1

我在这里假设你不想重复背景图片？

也许您希望标题有一个背景图像，然后是主要内容区域后面的特定背景颜色？

在这种情况下，假设不可能有一个非重复的bg图像（我不确定是诚实的），我会重复图像并在标题下面有一个容器，宽度与您的背景图片，使用适当的bg颜色设置，因此它会遮挡重复的bg图像。

同样值得将bg图像添加到第一个表容器中，这样如果有人在webmail客户端中读取消息，他们仍然会看到背景图像（许多webmail客户端剥离了头部和身体标签）。 / p>

我没有测试过这个，但这里大致是我在想的：

<body style="
padding:0;
margin:0;
background-image:url(http:/example.com/720pxx200px_bg_image.png);
background-repeat:repeat-y no-repeat;
background-position:center top;">

<table style="
border-collapse:collapse;
padding:0;
margin:0;
width:100%;
background-image:url(http:/example.com/720pxx200px_bg_image.png);
background-repeat:repeat-y no-repeat;
background-position:center top;">
<tr>
    <td align="center" valign="top">
        <table style="
            border-collapse:collapse;
            padding:0;
            margin:0;
            width:720px;
            height:200px;">
            <tr>
                <td><h1>Header Content Goes Here</h1></td>
            </tr>
        </table>
        <table style="
            border-collapse:collapse;
            padding:0;
            margin:0;
            width:720px;
            background-color:#fff;">
            <tr>
                <td><p>Body Content Goes Here</p></td>
            </tr>
        </table>
    </td>
</tr>

Answer 2

选择一种风格。 repeat-y意味着它不会在x方向上重复。

Answer 3

你可以用非常宽的图像来破解它，它位于水平中心。它重复两种方式（默认）。

这应该可以让你获得

后的视觉效果

Outlook体背景不重复

3 个答案: