0

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

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

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

谁能帮我这个？

4

3 回答 3

0

我在这里假设您不希望背景图像重复？

也许您想为标题设置一个背景图像，然后在主要内容区域后面使用特定的背景颜色？

在这种情况下，假设不可能有一个非重复的 bg 图像（我不确定是诚实的），我会重复图像并在标题下方有一个容器，与背景图像的宽度相同，使用适当的背景颜色设置，使其模糊重复的背景图像。

还值得将 bg 图像添加到第一个表容器中，这样如果有人在 web 邮件客户端中阅读邮件，他们仍然会看到背景图像（许多 web 邮件客户端去掉了 head 和 body 标记）。

我没有对此进行测试，但大致是我的想法：

<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>

于 2012-06-07T11:26:57.263 回答
-1

选择一种风格。repeat-y 表示它不在 x 方向重复。

于 2010-04-20T19:52:13.780 回答
-1

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

这应该可以让您获得您所追求的视觉效果

于 2010-08-09T13:30:13.873 回答