Question

我已经构建了一个带有固定标题的页面，该页面始终位于页面顶部。该页面有一个背景图片，标题是透明的。

我的基本布局：

<div id="header-container">

    <header class="wrapper">
        <h1 id="title">Headline</h1>
    </header>
    <nav id="main-navigation" class="wrapper">
        <ul>
            <li><a href="#">Nav Item</a></li>
        </ul>
    </nav> <!-- #main-navigation -->

</div> <!-- #header-container -->

<div id="main-container" class="wrapper">

    <article id="main">    
            <section class="content">
                <h2>some headline</h2>
                <p>content stuff</p>
            </section>
    </article> <!-- #main -->


    <footer id="footer">
            footer stuff
    </footer><!-- #footer -->

</div> <!-- #main-container -->

这是最重要的CSS：

#main-container {
    margin-top: 150px;
}    

#header-container{
    height: 150px;
    top: 0;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}

这里是我的jsfiddle：http://jsfiddle.net/0xsven/RBnHt/

当我向下滚动网站时，我希望隐藏#main-container的下溢（在header-container下面）（以某种方式像反向溢出：隐藏）。

如何在不改变布局方面的情况下实现这一目标？

Answer 1

问题是透明标题。

如果它是透明的，那么你会看到身体里面滚动的东西......

背景图片适用于整个文档，而不仅仅是标题。

你应该真正分割你的图像，标题为150px图像，其余为150px的图像。

看看这个：http://jsfiddle.net/tTjVe/1/

#header-container{
    ...
    ...
    background: url("http://www.webdesign.org/img_articles/20024/110.jpg") no-repeat top center fixed;
    background-size: 100% 150px;
}

小提琴使用相同的整个背景图像作为标题和正文......只需将它分成两部分就可以了。

透明固定头上下溢

1 个答案: