修复了滚动期间移动的背景图像

Question

好的，我尝试删除所有无关的内容，以便 a) 看看我是否能找到问题所在，以及 b) 让 post 更容易。我还没有找到问题所在，所以.. 进入计划 b！

我有一个#page-wrapper，我认为应该是静态的，允许内容在上面滚动，但我显然遗漏了一些东西，因为向下滚动显示白色背景。如有任何想法，我们将不胜感激！

    #page-wrapper {
      background: url(https://templatemo.com/templates/templatemo_543_breezed/assets/images/slide-02.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width: 100%;
      height: 100vh;
    }

https://jsfiddle.net/bjwxfyop/

Answer 1

@zimdanen。我认为这里的问题是作为视口高度提供的高度。由于内容是可滚动的，要么给它 100%，要么你可以完全删除高度属性。溢出滚动有效，但如果你检查开发工具，我怀疑它反映了包装器的实际高度

#page-wrapper {
  display: table;
  background: url(https://templatemo.com/templates/templatemo_543_breezed/assets/images/slide-02.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

Answer 2

所以，在这里你不需要提到高度和宽度。

div的会根据内容自然调整大小

如果您未在 div 上设置高度，它将扩展以包含其内容。

#page-wrapper {
  background: url(https://templatemo.com/templates/templatemo_543_breezed/assets/images/slide-02.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

修复了滚动期间移动的背景图像

Fixed background image being moved during scroll

css

background-image