html - 背景附件 : fixed not working

Question

我想做的是将“标题”固定为背景附件。我查看了与此类似的不同 SO 帖子，但这些帖子没有提供解决我的问题的答案。

我认为问题在于图像确实响应了该属性，但 header 却忽略了它。

任何建设性的帮助将不胜感激。谢谢!

顺便说一句，我正在使用 scss 和 BEM 模型。

html, body  {
  height: 100vh;
}

header {
  height: 100vh;
  background-image: url("/images/gifs/dedsec_loading.gif")
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

<div class="container">

      <!-- Banner: Begin -->
      <header class="landingPage__header">
        <h1 id="encoded-text">
          <span id="decoded">TEST</span>
          <span id="encoded"></span>
        </h1>
        <h1 class="header__ju--typography">
          TEST
        </h1>
      </header>
      <!-- Banner: End -->


      <!-- About-us: Begin -->
      <div>
        <p>Lorem ipsum</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>
      <!-- About-us: End -->

      <!-- Projects: Begin-->
      <!-- Projects: End-->

      <!-- Contact: Begin -->
      <!-- Contact: End -->

    </div>

Answer 1

background-attachment 专门针对元素的背景图像。它不会将您的元素转换为某种背景附件，因此我认为该 CSS 属性的含义让您感到困惑。

你所拥有的是position: fixed;这将使您的元素无论滚动如何都保持在视口(viewport)中的相同位置。如果您希望其余内容与标题重叠，则必须使内容也 position: fixed，像这样。

CSS:

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#scrolling-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

Here's a fiddle demonstrating this .