Question

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

这是我的图像容器

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

这是我的默认恒星JS来启动

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

我的班级，其中包含背景图片

.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: url

之后使用background-position: 50% 0;

只需更换它：

.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

恒星JS的背景-x位置

1 个答案: