jquery - Stellar JS 上的 Background-x 位置

Question

我试图让 background-x 达到 50%，我已经阅读了出色的文档并观看了演示。不幸的是，它会将 x 位置更改为 50%。我错过了什么？

这是我的图像容器

<div class="break stageOne" data-stellar-background-ratio="0.5"></div>

这是我默认启动的恒星 JS

$.stellar({
    horizontalScrolling: false,
    verticalOffset: 0
});

我的类(class)拥有背景图片

.break{
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
position: relative;
float: left;
width: 100%;
height: 700px;
}

我的背景图片

.stageOne{
background: url(http://matthewduclos.files.wordpress.com/2012/04/canoncine.jpg);
margin-top: 60px;
}

Answer 1

Stellar.js 与您的问题无关。这是因为你在 background-position: 50% 0;

之后使用了 background: url

只需替换它:

.stageOne{
background: url(http://matthewduclos.files.wordpress.com/2012/04/canoncine.jpg);
margin-top: 60px;
}
.break{
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
position: relative;
float: left;
width: 100%;
height: 700px;
}

或者使用 background-image 代替:

background-image: url(http://matthewduclos.files.wordpress.com/2012/04/canoncine.jpg);

DEMO