背景图像在 Chrome 中滚动和页面重新加载时消失

Question

我正在尝试在我网站主页上的部分标签中设置背景图片。它适用于以下 CSS，但问题是每当我向下滚动并向上滚动，或者在向下滚动一半后刷新页面（我设置背景图像的部分不在视野范围内），图像就会消失（离开背景为白色）。如果刷新页面时该部分的一部分仍在视图中，则只有图像的该部分显示图像并且其上方的所有内容都变为白色，在图像的其余部分应该存在的地方留下一个空白。

奇怪的是，如果我尝试用鼠标选择图像或按 Control-A 来选择页面上的所有内容，被选择的图像部分会出现在它应该在的位置，这意味着它就在那里，但只是由于某种原因没有出现。

这是我的代码：

HTML：

<section class="homePage"></section>

CSS：

.homePage{
    background: url(../images/background.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

这个问题的原因是什么，有什么补救措施？

Answer 1

为背景图片指定一个绝对 URL（以站点根目录 / 开头）解决了我的问题。

.homePage {
    background: url(/images/background.jpg);
}

Answer 2

你只需要添加背景附件。

background-attachment: fixed;