让我们假设我们有这个：
<body>
<div class="page">
<div class="header">
<div>Content</div>
</div>
</div>
</body>
让我们说我们有一个身体背景：
body { background: var(--complexBackground); }
.page { margin: 5.0em; }
.header { padding: 10px; }
如何裁剪身体背景，使其仅在.header中出现（尽可能多）？
例如，如果它是一个图像，这个确切的情况只会显示图像的“内容”，加上填充（如果有的话），考虑到边距。所以它是标题将用作背景的图像的5.0em。虽然我不想要只适用于图像的解决方案，但可能会出现其他背景条件。
同时，在body或.page的其余部分，背景将不存在。
是否有可能为页面的其余部分赋予.page不同的背景（因为它很可能.page必须裁剪它，然后让它进一步被.header裁剪，理论上这意味着我会能够单独设置背景）？
添加了扭曲，让我们假设.header是固定的：position: fixed; ...我们可以这样做，以便.header只占据背景的顶部，因为它起源了吗？
回顾一下：
正文：有背景。
.page：应该能够为.header a提供不重叠的所有内容 不同的背景。
.header：裁剪正文背景。奖金（不需要）：如果固定，
.header带有它背景有载的原始视图吗？
解决方案：适用于任何背景，而不仅仅是图片。