用Stellar JS居中CSS背景图片

Question

我正在使用Stellar JS为元素设置背景图片，并尝试实现一个居中的、具有视差效果的图片。然而，当我尝试使用标准方法时，我意识到stellar会更新background-position，从而覆盖了居中效果（我认为这就是覆盖的原因）。我创建了一个fiddle来解释这种情况。

http://jsfiddle.net/captDaylight/wvuQm/1/

有没有办法在滚动时使图像保持居中？

（stack让我附带代码发布这篇帖子，尽管在这种情况下它不重要，在fiddle上的示例非常简单，所以我发布一些内容来绕过这个问题）

background: url(http://upload.wikimedia.org/wikipedia/commons/e/e5/Seine_wide.jpg) no-repeat center center; 
background-size: auto 100%;

<> 我在阅读另一篇关于背景位置的堆栈帖子，但当我尝试进行建议的更新时，似乎破坏了视差效果。

http://jsfiddle.net/captDaylight/wvuQm/3/

- captDaylight

Answer 1

您需要禁用水平视差。这将导致Stellar.js保持您的水平背景定位不变。

在您的示例中，更新后的对Stellar的调用

$(window).stellar({ horizontalScrolling: false });

我已经更新了您的JSFiddle示例，并进行了此更改：http://jsfiddle.net/wvuQm/5/

- markdalgleish

Answer 2

移除以下 CSS

margin-bottom:50px;

添加以下脚本并尝试

$(window).stellar({
    scrollProperty: 'transform'
});

- vivek

---

我按照您的建议进行了更新，但似乎没有起作用...http://jsfiddle.net/captDaylight/wvuQm/4/ 我有什么遗漏吗？ - captDaylight