应用错误收集

我想创建一个类似于本网站的网站： http://www.ssangar.com/#home 我的网站将有一个类似于上面链接中的全屏图片。但是，当网站首次加载时，我想让第一张图片锁定所有其他内容。要解锁内容，查看者需要单击某个按钮。点击后，图片将以时尚的方式消失。

到目前为止我的图像和样式的基本代码在这里：

<body>
    <div class="foreground">
    <div class="container">
    <h1>What i am up to</h1>
    </div>
    </div>
...
</body>

和CSS：

.foreground { 
  background-image: url('./Img/Foreground1.jpg');
    height: 100vh;
    background-size: cover;
background-repeat: no-repeat;
}

所以我的问题是如何让第一张照片锁定所有其他内容？包括隐藏滚动条。是否可以使用单页网站？