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

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;
}

连同一些怪癖(应该改进)我们可以实现视差效果。

去 fiddle

查看 this JFiddle (在 Chrome 中)查看和使用它。