Outlook身体背景不可重复
[英]Outlook body background no-repeat
问题描述
I am sending an Email in HTML format geared toward outlook 2007/2010. 
我正在发送针对Outlook 2007/2010的HTML格式的电子邮件。 I applied a background image to body tag but it does not work. 我将背景图像应用到了身体标签，但是它不起作用。 Code as below: 代码如下：
<body
style="background-image: url('http://example.com/bg.jpg');
background-repeat: no-repeat;
background-position:top center;">
However if I change the "no-repeat" to "repeat-y no-repeat", it shows the background image but it repeats. 但是，如果我将“不重复”更改为“重复y不重复”，它将显示背景图像，但会重复。
Can anyone help me with this? 谁能帮我这个？
3 个解决方案
解决方案1
0 2012-06-07 11:26:57
I'm assuming here you don't want the background image to repeat? 我假设您不想在背景图像上重复？
Maybe you want to have a single background image for the header and then a specific background colour behind the main content area? 也许您想为标题设置单个背景图像，然后在主要内容区域后设置特定的背景颜色？
In this case, assuming it's not possible to have a non-repeating bg image (I'm not sure to be honest), I'd repeat-y the image and have a container below the header, the same width as your background image, with the appropriate bg colour set so it obscures the repeated bg image. 在这种情况下，假设不可能有一个非重复的bg图像（我不确定，老实说），我会重复该图像，并在标头下方有一个与背景图像相同宽度的容器，并设置了适当的bg颜色，以使重复的bg图像模糊。
It's also worth adding the bg image to the first table container as well so that if anyone reads the message in a webmail client they'll still see the background image (many webmail clients strip away the head and body tags). 同样值得将bg图像添加到第一个表容器中，这样，如果有人在Webmail客户端中读取消息，他们仍然会看到背景图像（许多Webmail客户端会删除head和body标签）。
I haven't tested this but here's roughly what I'm thinking: 我还没有测试过，但这大致就是我在想的：
<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>
解决方案2
-1 2010-04-20 19:52:13
Choose one style. 选择一种样式。 repeat-y implies that it doesn't repeat in the x direction. repeat-y表示它不在x方向上重复。
解决方案3
-1 2010-08-09 13:30:13
You can hack it with a very wide image, that is positioned in the horizontal center. 您可以使用非常宽的图像（位于水平中心）来破解它。 It repeats both ways (default). 它重复两种方式（默认）。
This should allow you to get the visual effect you are after 这应该可以让您获得想要的视觉效果
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.