防止覆盖层div滚动页面

Question

我有一个div，它在视口中水平和垂直居中。因此，我知道内容将始终可访问，当内容高于视口时，我将允许页面滚动。

[这似乎很好用，但是，我在div上使用background-image并在:before伪元素上覆盖了一层，以淡出背景。首先，我可以使用background-attachment: fixed解决背景滚动。现在我遇到的问题是，重叠div随页面一起向上滚动，因此“折叠以下”的区域现在没有变暗的背景。

我知道这是下降到position: absolute的位置，但是当我将位置更改为fixed时，可以达到预期的效果，但是覆盖层覆盖了垂直滚动条-有没有解决的办法？

我知道我可以使用已经变暗的图像，但这是在其他地方使用并正在重用的标记，因此，如果可能的话，我想找到一个CSS解决方案。

提前感谢！

附加的代码示例+一个CodePen版本（https://codepen.io/moy/pen/xxbwvdL），具体取决于您的偏好。 :)

html,
body {
  margin: 0;
  padding: 0;
}

h1,
p {
  margin: 0 0 30px;
  padding: 0;
}

.masthead {
  background-color: rgb(0,0,0);
  background-image: url("https://www.fillmurray.com/1920/1080");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  overflow: hidden;
  overflow-y: auto;
  padding: 60px 0 30px;
  position: relative;
  width: 100%;
}

.masthead:before {
  background: rgba(0,0,0,.45);
  content: "";
  display: block;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}

.wrap {
  margin: auto;
  padding: 0 30px;
  z-index: 12;
  max-width: 900px;
}

.masthead--fullbleed {
  height: 100vh;
  overflow-y: auto;
}
<section class="masthead masthead--fullbleed">

  <div class="wrap wrap--narrow align-center">
    <div class="hgroup">
      <h1 class="hgroup__title">Title here</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</section>

我有一个div，它在视口中水平和垂直居中。所以我知道内容将始终可访问，当内容比视口高时，我允许页面滚动。 ...

Answer 1

呃，为什么当您被某个东西卡住后又发布并立即想到一种解决方案（我认为）。

Answer 2

尝试更改：