以Stellar JS为中心的CSS背景图片 [英] CSS background image centered with Stellar JS

问题描述

我正在使用Stellar JS将背景图像设置为元素，并尝试获得以视差移动的居中图像.但是，当我尝试使用标准方法时，我意识到恒星会更新背景位置，然后它会覆盖居中(我假设这就是覆盖中心).我创建了一个小提琴来解释这种情况.

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

有什么办法可以使图像保持在滚动中心?

(堆栈使我在这篇文章中附带了代码，尽管在这种情况下它无关紧要，但小提琴上的示例非常简单，因此我要发布一些要绕开的东西)

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

<> 我正在阅读其他 stack post 关于背景位置的信息，但是当我尝试进行更新时，它似乎似乎打破了视差.

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

解决方案

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

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

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

我通过以下更改更新了您的JSFiddle示例: http://jsfiddle.net/wvuQm/5/

I'm setting a background image to an element with Stellar JS and trying to achieve a centered image that moves in parallax. However when I try to use the standard approach I realize that the background-position is updated by stellar which then overrides the centering (I'm assuming that's what's overriding it). I've created a fiddle to explain the situation.

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

Is there any way to have the image remain centered on scroll?

(stack is making me to accompany this post with code, although it's insignificant in this case, the example on the fiddle is pretty straightforward, so I'm posting something to bypass)

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

<> I was reading this other stack post about background-position, but when I tried to do the update it suggested it seems to have broken the parallax.

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

解决方案

You need to disable horizontal parallax. This will cause Stellar.js to leave your horizontal background positioning untouched.

In your example, the updated call to Stellar

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

I've updated your JSFiddle example with this change: http://jsfiddle.net/wvuQm/5/

这篇关于以Stellar JS为中心的CSS背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！