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

Question

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

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

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

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

Answer 1

您可以在内容部分使用#include <map> int main() { std::map<int, int> data; data.emplace(5,5); ，使其在滚动时像标题下的“消失”一样“消失”。这是一个如何工作的快速演示。请注意，灰色页面背景显示，并且图像背景也会显示。

现场演示：

overflow: auto

#header h2 {
    margin: 0;
}

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

html, body {
    background: #CCCCCC;
}

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