1. 首頁
  2. 問答
  3. 一起使用background-repeat和background-position

一起使用background-repeat和background-position

2009-12-07 26 views
0

我試圖在網站上實現faux column佈局。簡而言之，它涉及在div上包含一個背景圖像，該圖像包含兩個垂直列，使其看起來像兩列都一直延伸到底部。一起使用background-repeat和background-position

我的專欄是這樣的：

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

隨着對雲一路下跌的頁面左邊的一列，但在右側的頂部菜單和透明度之類的東西（「M」）柱。我只想在真正的右列開始時（「Y」）開始虛擬列背景，並且忽略由於菜單和Y列之間的透明度而導致的所有事情。爲了做到這一點，我計劃通過（background-position：0px 200px）來抵消背景圖像，以便將圖像放下200個像素。這不起作用。

我很快意識到圖像是垂直重複在兩個方向。從原始偏移點上下移動。這顯然會抵消抵消的影響。但是後臺重複-Y是虛擬列工作所必需的。

如何將背景重複和背景位置一起使用以獲得我想要的佈局？

謝謝！

UPDATE澄清：

這裏是我的佈局：

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

理想的情況下，綠色不會在那裏，我可以用一個 「橙色 - 透明 - 粉紅色」 的形象爲整個列創建虛擬列。但是如果我現在這樣做了，綠色菜單會因爲那個（真的很笨，順便）CSS反覆出現毛刺。我可以將綠色菜單的透明背景作爲透明PNG進行，但我不希望在整個粉色列中重複該操作。該網站的背景是一個圖像，所以我不能讓綠色菜單的div有一定的顏色背景。

似乎是一個雙輸的局面。

來源

2009-12-07 cksubs

回答

1

從特定位置開始重複背景是不可能的。

在你的情況下，其中一個解決方案是在你的整個頁面中使用虛擬列（從頂部開始），然後爲你的MMMM菜單使用PNG透明度。然後，您可以適度地降級IE和舊版瀏覽器。

但我不確定我是否理解你的問題。

如果問題是不應該在上面顯示YYYY列（例如MMMM），那麼您仍然可以使用該虛擬列的東西，然後將您的MMMM菜單和YYYY以上的所有內容包裝在一個div中與不同的beackground。通過這種方式，它會在YYYY之上隱藏您的虛擬列。

再一次，沒有看到實際設計就很難提供幫助。

UPDATE：

這似乎非常難以實現，只有CSS（我不知道它甚至有可能）。 有很多解決方案可以使用javascript來平衡高度。請參閱：http://spindrop.us/2007/05/22/equal-height-columns-with-jquery/

更新2：

其實，如果你的網站的XXXX部分停留在同一個地方的時候，你可以假的透明度和準確顯示對應的部分背景圖像它隱藏的實際背景。我做了很多次。

來源

2009-12-07 10:22:36

+0

我更新了一張圖片來澄清。用不同背景包裝MMMM的問題是，主體具有圖片背景，並且列之間的空間可以看到。所以MMMM不能有任何背景應用到它。 – cksubs 2009-12-07 11:14:39

+0

好的，謝謝，我更新了我的答案。 – 2009-12-07 11:43:28

+0

我用一個新想法再次更新它，如果你沒有得到它，請告訴我。 – 2009-12-07 15:04:15

1

據我所看到的，你這裏有兩種可能性：

  1. 給右列了堅實的背景顏色的MMMM一部分。然後，它覆蓋在假列

  2. 設置背景圖片不是容器，但到YYYY和XXXX列：

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

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

注「右」和「左」部分。

來源

2009-12-07 10:44:13 Boldewyn

+1

在這種情況下，背景圖像將停止顯示內容，它不會「一直延伸到底部」。 – 2009-12-07 10:49:22

+0

不幸的是，只要仍然存在「我不想支持最小高度」的瀏覽器，就是如此。 – Boldewyn 2009-12-07 12:34:57

1

你可能分裂XXXX部分分爲兩個部分（固定大小）：

XXXX MMMM 
XXXX MMMM 
XXXX

和（XXXX YYYY的垂直重複）：

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

要定位的背景正確，你可以操縱容器（可能是一個div）應用了背景圖像。

來源

2009-12-07 11:49:25

1

我不知道你的列是如何定位的，但也許可以使用你的主背景圖像（網站的背景）作爲現在綠色菜單的背景。

或者在菜單和右列之間的z-index中使用一個絕對定位的div來「覆蓋」你的紫色背景。你可以將它放在中心位置，並將其放在左欄中，以防佈局居中，而且第一個解決方案是不可能的。

另一種解決方案是使用JavaScript來設置你的兩個主柱的高度讓他們去了所有的方式，但我會嘗試的CSS第一...

來源

2009-12-07 15:32:28 jeroen

相關問題

 相關問題