html - 如何在保持背景的同时剪切部分下的文本？

Question

我有一个包含固定标题图形、一些文本和背景的部分。

我试图完成的行为是当滚动过去时，文本部分将在标题下消失。但是，我需要维护该部分的背景图片。

我怀疑某种 css 剪辑应用于不可见部分，但大多数搜索显示如何剪辑以显示背景，而不是隐藏。也许是一些奇怪的视差行为？

快速模型:正常(左)，滚动(右)

Answer 1

您可以在内容部分使用 overflow: auto 使其在滚动时像标题下方那样“消失”。这是一个如何工作的快速演示。请注意，灰色页面背景会显示出来，图像背景也会显示出来。

现场演示:

#header h2 {
    margin: 0;
}

#content {
    height: 100px;
    overflow: auto;
}

html, body {
    background: #CCCCCC;
}

<div id="header"><h2>Header</h2></div>
<div id="content">
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
</div>

JSFiddle 版本:https://jsfiddle.net/wLcmrk9m/1/