0

我正在使用StickyPanel、Smooth-Scroll和Scrolly，我需要在偶数“页面”上固定（内容在其上移动）背景，以及在奇数“页面”上使用视差背景（内容和背景相互分开移动）。所以我的“页面”是偶数、奇数、偶数、奇数、偶数。“页面”是 5 个 div，一个在另一个之下，每个 div 设置为浏览器窗口的宽度和高度，以制作一个单页网站。

我遇到的问题是，在具有视差背景的“页面”2 和 4 上，背景位置错误。通过检查元素，我发现Scrolly设置的背景位置太远了，甚至没有显示背景图像。Scrolly为您提供了两个属性来设置具有滚动背景的元素：

<div data-velocity=".3" data-fit="1000">

这些允许您设置视差元素的速度并分别设置相对背景位置。我发现当我使用 data-fit 属性调整背景时，它永远不会出现在正确的位置，因为“页面”以及背景高度是相对于浏览器窗口的。

我需要背景始终覆盖 div，即如果背景图像是不透明的图像，则 div 的背景颜色将永远不会显示。

我认为可能将背景设置为比浏览器窗口多约 10% 可能会有所帮助，但我不知道该怎么做。

这是一个jsFiddle，尽管由于某种原因背景图像不会显示在“页面”5上。我还将背景图像设置为占位符，并将 div 设置为具有随机背景颜色，以便在开发时轻松。

这是一个很难解释的问题，所以我可能没有彻底传达我的观点。如果我想到一个更好的方法来解释这个问题，我会更新我的帖子。

谢谢

4

1 回答 1

0

好的，这是一个简单的，但终于弄明白了。我是在使用 JS 获取页面高度的一半，获取页面高度的 130%，然后将背景图像 css 设置为那样，当我意识到我可以在 CSS 中设置它时......所以我设置了背景- size 到 100% 130%，然后只是用 data-fit 属性完善它的一个例子。无论如何，它现在已经足够接近我的喜好了。

background-size: 100% 130%;

jsFiddle 对于那些感兴趣的人

于 2013-04-17T13:25:17.650 回答