2

我一直在整个互联网上寻找这个问题的答案，但我就是找不到答案。我有一个透明的标题，里面有一个与我的背景相同的背景图像，我想要我的主 div在其下方滚动以隐藏文本。这是HTML：

<body>
    <div class="wrapper">
    <div class="top">
    <!-- This is my header -->
    </div>
    <div class="main">
    [.....]
    </div>

这是CSS：

.top {
    background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
    margin-top:0px;
    height:100px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    vertical-align:central;
    padding-left:0px;
    padding-right:opx;
}

.main {
    position:absolute;
    top:100px;
    bottom:20px;
    left:0;
    right:0;
    width:990px;
    margin:0 auto;
    padding-top:10px;
    padding-left:5px;
    padding-right:5px;
    z-index:-1;
}

我制作了一个 jsFiddle，可以在这里找到：http: //jsfiddle.net/qcaJJ/。你能帮我看看如何让它工作吗？提前致谢！

附言。请不要介意页脚，我已经使用了我另一页的页脚，我不希望这个页出现在这个页面上：p

pps。如果有人知道让导航保持在原位和 main2 div 滚动的方法，那么您就是我的英雄！有点新的 HTML 和 CSS ..

4

3 回答 3

1

在这里查看我的 JSFiddle：http: //jsfiddle.net/qcaJJ/3/

您需要fixed为标题设置一个位置，而不是为页面的所有其余部分设置一个绝对位置。

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:red;
}

.content{
    margin-top:100px;
    font-size:180%;
}
于 2013-03-16T21:07:37.443 回答
1

除了为标题使用固定位置外，正如其他答案所指出的那样，您还使用了具有透明度的背景图像，因此当主要部分在下方滚动时，您仍然可以看到它。您需要像这样添加背景颜色，以确保标题 div 覆盖下面滚动的内容：

.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
于 2013-03-16T21:26:15.557 回答
0

top必须是这样position:fixed才能工作。这样可以确保它始终卡在屏幕顶部。

您可能还希望将 设置z-index为类似的东西，1000以便它始终位于其他所有内容之上。

于 2013-03-16T21:08:42.950 回答