html - 滚动时如何让内容消失/隐藏在透明标题后面

Question

我创建了一个 js fiddle http://jsfiddle.net/claireC/8SUmn/具有透明的固定 header 。

当我滚动时，您可以看到文本在它后面向上滚动。如何让文本消失或隐藏在滚动的透明 div 后面。

编辑:忘了说背景是一张图片。

注意:我是编码初学者。这是我在玩弄代码并试图解决问题。

这是我的 html:

<div class="container">

<header>
    <ul>
        <li>list one</li>
        <li>list3   </li>
        <li>list2</li>
    </ul>
</header>

<div class="text">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.

    </p>
</div>

CSS:

    header{
        width: 100%;
        position: fixed;
        top: 0;
        border: 1px solid #000;
    }

    .text{
        border: 1px solid #fff;
        position: relative;
        margin-top: 150px;
    }

    p{
        font-size: 150px;
    }

Answer 1

如果您可以设置页眉高度，则可以使用position:absolute 和overflow:auto 来获取结果

Demo