修复了页面底部的背景图片(Fixed background image until bottom of page)

编程入门行业动态更新时间:2024-10-09 21:21:51

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

我正在研究纯粹的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％的草山将被展示。

我在任何地方都找不到，但由于我对语言不太熟悉，因此可能只是使用了较差的搜索条件。

I'm trying to get a background image to start and stay in a fixed position, but only until the rest of the 'content' of the page is finished, at which point the full image is displayed.

I'm working on a purely CSS solution. I should note that the image is larger than most (laptop) screens.

Specifically, here's the code that I've been using:

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

The image that I'm using is given in the url():

The effect that I'm looking for is basically the image will display only about the top 10% of the grass hill while you're looking at most of the page, but if you finally scroll all the way down past all the page content, the remaining 90% of the grass hill will be shown.

I couldn't find this anywhere, but I may have just been using poor search terms since I'm not so familiar with the lingo.

最满意答案

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

主要观点

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

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

伴随着一些怪癖（应该改进），我们可以达到视差效果。

去小提琴

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

Well, this was one jiggy nut! I did come up with a not so stable trick to achieve this. I don't have time to develop it any more right now, but perhaps it might be a working concept.

Main contept

By providing a large and empty footer area that the user is likely to hover when reaching the bottom of the page, we use a sibling selector to change the position of its sibling element containing the background:

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

Along with a few quirks (which ought to be improved) we can achieve a parallax effect.