html - 修复了可滚动前容器后面的背景层

Question

这就是我尝试使包装器容器在页脚元素上滚动的方法。

页脚应该固定在背景中，所以它不应该移动。我想给用户一种他正在向上移动包装层以查看固定背景页脚的感觉。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow-x: auto;
  background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center;
  background-size: cover;
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}
footer {
  bottom: 0;
  z-index: -10;
  width: 100%;
  height: 300px;
  background: #555;
}

<div id="wrapper"></div>
<footer>This content should stay fixed on bottom of footer</footer>

Answer 1

对于固定页脚给出 position:fixed;bottom:0;对于视差滚动，请参阅:Parallax