我在我的网站上使用背景图像，我的标题位置固定为透明背景。 我希望在标题下滚动时隐藏主要内容。 我设法使用 -webkit-mask-image 属性来实现这一点，但它影响了页面的整个结构（包装器的高度必须为 100vh 并带有溢出滚动...）。我想知道是否有一个更简单的解决方案可以使用，不会影响结构，因为我正在使用一些其他功能（例如滚动到 ID）。
这是一个代码笔：https://codepen.io/mmdwc/pen/Yzdyaqw
body {
overflow:hidden;
background: url("https://keops-event.com/wp-content/uploads/2021/02/06-keops-calbar-bar-cover-2210x1245.jpg") center center no-repeat;
color:white;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
header {
position: fixed;
top: 0px;
width: 100%;
left: 0px;
padding: 20px 20px 0px 20px;
z-index: 102;
height: 50px;
}
#wrapper {
width: 100%;
height: 100vh;
padding: 20px;
padding-top: 50px;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50px, rgb(0, 0, 0) 60px);
overflow-y: scroll;
font-size:80px;
}<html>
<body>
<header>
THIS IS THE HEADER
</header>
<div id="wrapper">
<div id="content-ajax">
Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.
</div>
</div>
</body>
</html>有什么建议吗？
我认为做到这一点的方法是剪切内容而不是屏蔽包装。有关差异的详细说明，您应该查看 https://css-tricks.com/clipping-masking-css/。