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

将是开始的地方。

Div in Position使用背景图像固定在div位置绝对位置内

1 个答案: