css - 位置中的 div 在绝对位置与内容的 div 下使用背景图像固定

Question

我想改变我在页面中显示背景图像的方式以获得更大的灵活性。

这里是我的 CSS 代码在section id="home"显示图像的那一刻：

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/

Answer 1

我认为是这样的：

<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...
}

将是开始的地方。