滚动时的视差效应问题

Question

我希望图像适合容器元素，但我的代码只显示图像的一半，没有所需的视差效果。任何人都可以解释为什么它没有显示完整的图像吗？

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.top_nav {
  height: 80px;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  position: absolute;
}
.container {
  height: 400px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-image: url("http://cdn.pcwallart.com/images/beautiful-nature-animals-wallpaper-3.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.details {
  height: 638px;
  width: 100%;
  background-color: #00e5de;
}

＆＃13;

<header>
  <div class="top_nav">

  </div>
</header>
<div class="container">
  <div id="short-des">

  </div>
</div>
<div class=details>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

对100vh身高

使用.container

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.top_nav {
  height: 80px;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  position: absolute;
}
.container {
  height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-image: url("http://cdn.pcwallart.com/images/beautiful-nature-animals-wallpaper-3.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.details {
  height: 638px;
  width: 100%;
  background-color: #00e5de;
}

＆＃13;

<header>
  <div class="top_nav">

  </div>
</header>
<div class="container">
  <div id="short-des">

  </div>
</div>
<div class=details>
</div>

＆＃13;

＆＃13;

＆＃13;

vh：视口高度的百分之一。

Answer 2

您所要做的就是扩大容器的高度。您可以使用vh大小调整单位（百分之一的视口高度）或任何其他单位。