4

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

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

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

4

1 回答 1

1

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

主要概念

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

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

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

去小提琴

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

于 2013-03-11T15:46:08.700 回答