html - 一起使用 background-repeat 和 background-position

Question

我正在尝试实现 faux column网站上的布局。简而言之，它涉及在包含两个垂直列的 div 上平铺背景图像，使其看起来像两个列一直延伸到底部。

我的专栏如下所示:

XXXX   MMMM
XXXX   MMMM
XXXX
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY

左侧有一列一直向下延伸到页面下方，但右侧列顶部有菜单和透明度以及其他内容(“M”)。由于菜单和 Y 列之间的透明度，我只希望在真正的右列开始(“Y”)后，人造列背景开始，并忽略上面的所有内容。

为此，我计划通过 (background-position: 0px 200px) 偏移背景图像，将图像降低 200 像素。这行不通。

我很快意识到图像在垂直方向上在两个方向上重复。从原始偏移点上下。这显然消除了偏移的影响。但是 background-repeat-Y 是人造列工作所必需的。

如何同时使用 background-repeat 和 background-position 来获得我想要的布局？

谢谢!

更新澄清:

这是我的布局:

alt text http://img38.imageshack.us/img38/3032/colorlayout.jpg

理想情况下，绿色不会在那里，我可以使用“橙色 - 透明 - 粉红色”图像为整个列做人造列。但如果我现在这样做，绿色菜单将有一个粉红色的背景，因为(顺便说一句，真的很愚蠢)CSS 重复故障。我可以将绿色菜单的透明背景作为透明 png，但我不希望在整个粉红色列中重复这一点。网站的背景是一张图片，所以我不能只让绿色菜单的 div 有特定的颜色背景。

似乎是双输的局面。

Answer 1

据我所知，这里有两种可能性:

1. 为右列的 MMMM 部分提供纯色背景。然后覆盖假列

2. 不将背景图像设置到容器，而是设置到 YYYY 和 XXXX 列:

---

#XXXXcol {
  background: url(fake.png) repeat-y left top;
}

#YYYYcol {
  background: url(fake.png) repeat-y right top;
}

注意“右”和“左”部分。