我正在使用 Stellar JS 为元素设置背景图像,并尝试实现以视差移动的居中图像。但是,当我尝试使用标准方法时,我意识到背景位置由 stellar 更新,然后覆盖居中(我假设这就是覆盖它的原因)。我创建了一个 fiddle 来解释这种情况。
http://jsfiddle.net/captDaylight/wvuQm/1/
有没有办法让图片在滚动条上保持居中?
(堆栈让我在这篇文章中附上代码,尽管在这种情况下它无关紧要, fiddle 上的示例非常简单,所以我发布了一些可以绕过的东西)
background: url(http://upload.wikimedia.org/wikipedia/commons/e/e5/Seine_wide.jpg) no-repeat center center;
background-size: auto 100%;
<> 我正在阅读其他 stack post关于背景位置,但是当我尝试进行更新时,它表明它似乎已经打破了视差。
最佳答案
您需要禁用水平视差。这将导致 Stellar.js 保持水平背景定位不变。
在您的示例中,对 Stellar 的更新调用
$(window).stellar({ horizontalScrolling: false });
我已经通过以下更改更新了您的 JSFiddle 示例:http://jsfiddle.net/wvuQm/5/
关于以 Stellar JS 为中心的 CSS 背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15930504/