Question

我一直在寻找这个问题的答案，但是我找不到答案。我有一个透明的标题，里面装满了与我背景相同的背景图片，我想要我的主要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/。你能帮我解决一下如何让这个工作吗？提前谢谢！

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

pps。如果有人知道如何让导航保持在它的位置并且main2 div滚动，那么你就是我的英雄！有点新的HTML和CSS ..

Answer 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%;
}

Answer 2

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

.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;

Answer 3

top必须为position:fixed才能生效。这可以确保它始终位于屏幕顶部。

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

透明标题由主div溢出

3 个答案: