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

【问题标题】：Fixed background image until bottom of page固定背景图像直到页面底部
【发布时间】：2013-02-25 17:46:46
【问题描述】：

我正在尝试让背景图像开始并保持在固定位置，但直到页面的其余“内容”完成，此时显示完整图像。

我正在研究一个纯粹的 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%的草山会显示出来。

我在任何地方都找不到这个，但我可能只是使用了糟糕的搜索词，因为我对术语不太熟悉。

【问题讨论】：

您需要使用jquery找到滚动位置，然后相应地更改css。
您希望展示是突然的，还是从滚动开始逐渐展开的？
抱歉，问得好 - 我希望它是突然的，这样图像在您到达页面的最底部之前是完全静止的。
@Free 这可能不适用于您的项目，但您对我的回答有兴趣吗？干杯。

标签： css background background-image css-position

【解决方案1】：

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

主要概念

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

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

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

去小提琴

查看this JFiddle（在 Chrome 中）查看和使用它。

【讨论】：