Question

我想要做的就是拥有标题＆＃39;固定为背景附件。我已经查看了与此类似的不同SO帖子，但那些没有提供解决我问题的答案。

我认为问题在于，图像是否对属性做出响应，但标题忽略了它。

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

我使用scss和BEM模型btw。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

在这里，请使用以下属性的background-image的简短表格，阅读更多here和here

html, body  {
  height: 100vh;
}

header {
  height: 100vh;
  background: url("http://via.placeholder.com/350x150") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<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 2

使用标题的position: fixed样式属性。如果你给一个100vh的高度元素和一个固定的元素，请小心。它会覆盖你的整页。

html,
body {
  height: 100vh;
}

header {
  height: 10vh;
  width: 100vw;
  background-image: url("https://placeimg.com/1000/480/tech/grayscale");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: fixed;
  top: 0;
}

div {
  margin-top: 10vh;
}

<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 3

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

您所拥有的是position: fixed;这将使您的元素无论滚动如何都保持在视口中的相同位置。如果您希望其他内容与标题重叠，则必须同时制作内容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

background-attachment：修复不起作用

3 个答案: