固定背景图像直到页面底部

Question

我正在尝试让背景图像开始并保持在固定位置，但只有在页面的“内容”的其余部分完成之后，才会显示完整的图像。

我正在研究纯粹的CSS解决方案。我应该注意到图像比大多数（笔记本电脑）屏幕大。

具体来说，这是我一直在使用的代码：

body {
  background:$bgcolor;
  background-image:url('http://i.imgur.com/cIGSehG.jpg');
  background-repeat:no-repeat;
  background-position:0px 72px;
  background-attachment:fixed;
  margin:0;
  ...
}

我正在使用的图片在url()：

中给出

我正在寻找的效果基本上是在你看到大部分页面的时候，图像只显示草山的前10％，但是如果你最后一直向下滚过所有的页面内容，其余90％的草山将显示。

我无法在任何地方找到这个，但我可能刚刚使用了糟糕的搜索词，因为我对词语并不熟悉。

Answer 1

嗯，这是一个坚果！我确实提出了一个不太稳定的技巧来实现这一目标。我现在没有时间再开发它，但也许它可能是一个有效的概念。

主要提示

通过提供一个大且空的页脚区域，用户可能在到达页面底部时悬停，我们使用兄弟选择器来更改包含背景的兄弟元素的位置：

#footer:hover ~ #background {
    background-position: center bottom;
}

除了一些怪癖（应该改进），我们可以实现视差效果。

去小提琴

查看this JFiddle（在Chrome中）以查看和播放。