Javascript 是否使用jQuery更新滚动条上的多个背景位置？

视差脚本不会更新

$（窗口）上的css。滚动
。似乎无法使用jQuery添加多个背景位置

视差滚动脚本：

<script>
var top_header = '';
$(document).ready(function(){
  top_header = $('header');
});
$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px,"});
});
</script>

header {background-image: url(../images/1.png), url(../images/2.png);
        background-repeat: no-repeat, no-repeat;
        background-position: left, right; 
        height: 550px; width: 100%}

$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px,"+","+"right "+(st*.5)+"px,"});
});

我尝试过像这样更新css:

<script>
var top_header = '';
$(document).ready(function(){
  top_header = $('header');
});
$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px,"});
});
</script>

header {background-image: url(../images/1.png), url(../images/2.png);
        background-repeat: no-repeat, no-repeat;
        background-position: left, right; 
        height: 550px; width: 100%}

$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px,"+","+"right "+(st*.5)+"px,"});
});

这会阻止代码，并且标题的背景位置不会在滚动时更新

任何想法都值得赞赏



在css中，您可以这样设置位置：

 background-position: bottom right, left, right;

这意味着你的代码应该是这样的

$(window).scroll(function () {
  var st = $(window).scrollTop();
  top_header.css({'background-position':"left "+(st*.5)+"px," + "right "+(st*.5)+"px;"});
});

对于多背景图像，应使用以下结构：

background-image:url(1), url(2), ...;
background-repeat: no-repeat(1), no-repeat(2) , ...;
background-size: 50% 50% (1),50% 50%(2) ,...;
background-position: left center(1), right center(2), ....;

或

使用JQuery

var top_header = '';
$(document).ready(function () {
    top_header = $('header');
});
$(window).scroll(function () {
    var st = $(window).scrollTop();
    top_header.css({
        'background-position': "left center," + "right " + (st * .5) + "px"
    });
});
$("#btnAdd").click(function () {
    var bg = $("header").css('background-image');
    $("header").css('background-image', bg + ', url("http://www.wired.com/wp-content/uploads/images_blogs/rawfile/2013/11/offset_RonnyRitschel_23712-1-660x660.jpg")');
});

在演示中，首先单击
添加bg
，然后滚动页面查看结果

不，css不支持“多个背景图像”，使用2个div（显示：内联块）作为背景each@andrew当然是了。@dfsq哦，我的观点是正确的，我不知道CSS3支持多个背景图像。请阅读文档：这正是我所描述的，我在问题中已经尝试过的。不，这不是仔细看，你有
“px，+”，“+“r
在其中添加了一个逗号，您正在用逗号而不是分号来关闭背景大小。这已经在起作用，但我遇到的问题与jQuery滚动函数有关。它不会更新滚动条上的位置。请看问题中的两个链接。