1

我正忙于创建一个网站，该网站最好需要一个覆盖整个屏幕的背景图片，但是当访问者向下滚动时会出现其他内容。

到目前为止，我通过创建 2 个 div（我称之为 #container_page1 和 #container_page2）来完成这项工作。这是第一个 div 的 css：

#container_page1 { 
    background-image:url(images/background.jpg); 
    background-size: cover;
    position:absolute;
    margin:0px;
    width:100%;
    height:100%;
}

这是第二个 div 的 css：

#container_page2 {
    background-color: #F00;
    height: 2000px;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

问题是第二个div的内容出现在第一个div的下面，显然是因为第一个div是绝对定位的。

当然，我可以通过边距或填充将第二个 div 的内容放置在较低的位置，但由于屏幕分辨率不同，这不会很好地工作。

在这里你可以看到我到目前为止所做的：http: //kmnew.kadushimarketing.com/index.php。您还将看到链接到第二个 div 中的锚点的“了解更多”按钮。

有没有人建议让第二个 div 从第一个 div 结束的地方开始？

4

2 回答 2

3

将两个 div 包装成一个父 div。然后给该父 div 一个绝对位置，并将两个内部 div 放置在该 div 内彼此相邻的位置。

于 2012-11-09T17:18:04.413 回答
1

如果您需要每个部分都有自己的特殊背景并且与浏览器的大小完全相同，那么为什么要使用绝对位置呢？

使用如下风格：

body, html{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

section{
    width:100%;
    height:100%;
    background-image:url(images/background.jpg); 
    background-size: cover;
}

然后将所有内容 div 相对定位，您应该能够保持浏览器大小的背景并让部分按顺序堆叠。

如果要控制部分内容的位置，可以使用如下结构：

<section>
    <div class="content">
        Section content goes here
    </div> 
</section>

使用相应的 CSS：

section .content{
    width: 500px;
    margin:0 auto;
}

这会将内容固定为 500px 的宽度并在屏幕上居中。希望这可以帮助！

于 2012-11-09T18:59:42.727 回答