Question

好的，我尝试删除所有无关的内容，以 a) 看看我是否能找到问题所在，以及 b) 使其更容易发布。我还没有发现问题，所以..进入计划 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;
}

固定背景图像在滚动期间移动

2 个答案: