以 Stellar JS 为中心的 CSS 背景图片

标签 css background-image parallax

我正在使用 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关于背景位置,但是当我尝试进行更新时,它表明它似乎已经打破了视差。

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

最佳答案

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

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

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

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

关于以 Stellar JS 为中心的 CSS 背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15930504/

相关文章:

css - 如果文本居中对齐,如何在任何屏幕尺寸中将背景图像居中?

html - 如何在 Angular 中的整个页面上添加透明背景图像?

javascript - 视差滚动和浏览器滚动距离。

javascript - 如何加快背景图片的滚动速度?

javascript - 在粘贴到文本字段 Jquery 时检查并突出显示不支持的特殊字符

jquery - Bootstrap 在导航栏悬停时更改 i 类的颜色?

CSS 主体 `background-image` 在 Chrome、Safari (webkit) 上右对齐

html - 位置:固定;对我的 CSS 菜单做了一些时髦的事情

CSS :hover to affect all child divs

android - 如何在scrollview上方使用CollapsingToolbarLayout?