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像素。这不起作用。

我很快意识到图像垂直向两个方向重复。从原始偏移点向上和向下。这显然可以解除偏移的影响。但是人造柱需要背景重复Y来实现。

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

谢谢！

更新到澄清：

这是我的布局：

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

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

似乎是一个双输的局面。

Answer 1

无法使背景从特定位置开始重复。

在您的情况下，其中一个解决方案是在整个页面中使用仿色列（从顶部开始），然后在MMMM菜单中使用PNG透明度。然后，您可以优雅地降级IE和旧版浏览器。

但我不确定我是否理解你的问题。

如果问题是YYYY列不应显示在上面（例如MMMM的位置），那么你仍然可以使用那个faux-column的东西，然后将你的MMMM菜单和YYYY之上的所有内容包装在div中一个不同的背景。通过这种方式，它可以将您的虚拟列隐藏在YYYY之上。

同样，如果不看实际设计，很难提供帮助。

<强>更新

这似乎很难用CSS实现（我不确定它是否可能）。有很多解决方案可以使用javascript来均衡高度。请参阅：http://spindrop.us/2007/05/22/equal-height-columns-with-jquery/

更新2：

实际上，如果您网站的XXXX部分始终停留在同一个地方，您可以伪造透明度并显示与其隐藏的实际背景部分完全对应的背景图像。我做过很多次了。

Answer 2

据我所知，你有两种可能性：

为右列的MMMM部分提供纯色背景。然后它覆盖假列
将背景图片设置为不是容器，而是设置为YYYY和XXXX列：

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

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

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

Answer 3

您可以将XXXX部分拆分为两部分（固定大小）：

XXXX   MMMM
XXXX   MMMM
XXXX

和（XXXX YYYY的垂直重复）：

XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
...

要正确定位背景，您可以操纵应用了背景图像的容器（可能是div）。

Answer 4

我不知道您的列是如何定位的，但也许可以使用您的主背景图片（网站的背景）作为现在为绿色的菜单的背景。

或者在菜单和右栏之间的z-index中使用绝对定位的div来“覆盖”紫色背景。你可以将它放在中间位置，并将它放在你的左栏后面，以防你的布局居中并且第一个解决方案是不可能的。

另一种解决方案是使用javascript来设置两个主要列的高度，让它们一直向下，但我会首先尝试使用CSS ...

Answer 5

在这种情况下，我发现了一种替代人造柱的替代方法：

http://www.positioniseverything.net/articles/onetruelayout/equalheight

基本上：

#page {
    overflow: hidden

#orange, #pink {
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}

谢谢大家！

一起使用background-repeat和background-position

5 个答案: