Html 如何在保持背景的同时剪辑某个部分下的文本？

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

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

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

快速模型：正常（左），滚动（右）

---

您可以在内容部分使用

溢出：auto

，使其在滚动时像标题下那样“消失”。下面是一个如何工作的快速演示。请注意，灰色页面背景显示为透明，图像背景也显示为透明

现场演示：

#标题h2{
保证金：0；
}
#内容{
高度：100px；
溢出：自动；
}
html，正文{
背景:#中交;；
}

标题
同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

我认为如果我将一个内容设置为固定高度，并且您在该固定内容的范围内滚动，则此功能会起作用。对我来说，我有一个固定的标题，然后内容就是页面的一部分。因此，我不确定这是否能在不影响页面其余部分的情况下实现。@Chris在这种情况下，您应该在页眉和页面内容上设置相同的背景图像，并在其中一个页面上使用

background position

属性，以便它们都对齐。我认为这可能会奏效。。。不完全是我想要的路线，但我会试试看。我必须实施视差效果来保持它们的同步。决定动画需要与实现过于复杂，我只是将标题放在背景区域上方。