CSS：固定背景图像高于浏览器视口

Question

我有一张大照片 (940x1210) 作为 #page div 的背景图片，它环绕了网站上的所有内容。由于这张照片是爆头，它看起来很傻，所以我将它设置为不重复，并将其定位在 0,0。

#page 包围的内容大于 1210px 且背景图片设置为滚动时，照片会滚动到视野之外，但如果是固定的，则仅显示最初在浏览器视口中显示的图像部分-上半部分（固定左上角）或下半部分（固定左下角）。

问题是：如何将背景图像固定到#page（或正文）的底部，同时滚动图像的整个高度直到我到达底部？

Answer 1

由于您想在用户滚动时更改背景图像的行为，因此您需要使用 onscroll Javascript 事件。

从顶部附加的背景图像开始并设置为滚动。当用户滚动时，测试他们是否滚动超过了图像的高度。一旦他们有，将背景图像设置为固定位置。

然后如果用户向上滚动到小于图像的高度，则将背景设置为再次滚动。