Html 滚动时出现视差效果问题

我想要一个适合容器元素的图像，但是我的代码只显示了图像的一半，没有期望的视差效果。有人能解释为什么它没有显示完整的图像吗

*{
保证金：0；
填充：0；
}
.顶置导航{
高度：80px；
宽度：100%；
背景：rgba（0,0,0,5）；
位置：绝对位置；
}
.集装箱{
高度：400px；
宽度：100%；
最大宽度：100%；
溢出：隐藏；
背景图像：url（“http://cdn.pcwallart.com/images/beautiful-nature-animals-wallpaper-3.jpg");
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
z指数：-1；
}
.详情{
高度：638px；
宽度：100%；
背景色：#00e5de；
}

---

对您的

集装箱使用
100vh


*{
保证金：0；
填充：0；
}
.顶置导航{
高度：80px；
宽度：100%；
背景：rgba（0,0,0,5）；
位置：绝对位置；
}
.集装箱{
高度：100vh；
宽度：100%；
最大宽度：100%；
溢出：隐藏；
背景图像：url（“http://cdn.pcwallart.com/images/beautiful-nature-animals-wallpaper-3.jpg");
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
z指数：-1；
}
.详情{
高度：638px；
宽度：100%；
背景色：#00e5de；
}

您所要做的就是扩展容器的高度。您可以使用vh尺寸单位（百分之一百的视口高度）或任何其他单位。
您已将
400px
高度指定给
。container
这就是它显示半幅图像的原因，但我也将图像位置设置为中心，所以为什么它不在中心对齐？因为您已指定
背景尺寸：封面因此它覆盖了整个元素的背景，例如，使用自定义大小的bg图像（比如100px），您将看到您的图像居中对齐