Div位置固定背景圖像下div位置絕對位置內容

我想改變我在我的頁面中顯示背景圖像的方式以獲得更大的靈活性。Div位置固定背景圖像下div位置絕對位置內容

這裏在section id="home"的時刻，顯示圖像我的CSS代碼：

background-image: url("/img/architecture.jpg"); 
background-attachment: fixed; 
background-position: center 1115px; 
height: 350px; 
width: 100%; 
margin-top: 35px; 
box-shadow: 2px 1px 6px 0 #888888 inset;

我想要做同樣的事情，但以這樣的方式創建位置一個div固定在這樣的背景圖像在相同的位置，然後將其放在另一個div的網頁內容上（絕對位置？）。那可能嗎？你怎麼能做到這一點？希望解釋清楚

這裏我的網頁：http://tommywebdesigner.com/Home%20Page.html 並且：http://fiddle.jshell.net/CGJmE/

來源

2012-09-11 Koala7

你能解釋一下好嗎，它可能只是但我沒有得到你想要在這裏存檔.... – Breezer

你的意思是讓菜單和大圖像滾動頁面？如果是這樣，你需要將#home設置爲position：fixed;並且將頭部改爲位置：fixed;並且讓它看起來更像一個樣子 –

好吧，換句話說，我希望達到和現在一樣的效果，但是以不同的方式使用div。我想要一個位置的div作爲背景固定在相同的位置，並在另一個div上面使用我的頁面內容。所以用這種方法如果我滾動div的內容div與背景圖像保持不變。現在它更清楚了嗎？謝謝P.s圖像，當你在窗戶外看着，效果相同！ :) – Koala7

我覺得是這樣的：

<div id="background">...background stuff here...</div> 
<div id="content">...content here...</div>

與CSS：

#background 
{ 
    position:fixed; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    z-index: 1; 
    ...other styles... 
} 
#content 
{ 
    position:fixed; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    z-index:2; 
    overflow:scroll; 
    ...other styles... 
}

將是地方開始。

來源

2012-09-11 10:46:11 Gareth

好的，這個概念很清楚，所以菜單欄將被定義爲div的內容嗎？ – Koala7

是的，我會把所有內容都放到'div'內因爲你想在背景中保持靜態，那麼只要把'div'看作是'body'。 – Gareth

好的，我會以這種方式解決它，讓你知道...... – Koala7

Div位置固定背景圖像下div位置絕對位置內容

回答

相關問題