Jquery 更改多背景div中一个背景图像的位置

我有一个简单的HTML:

和这个样式表：

#wrapper{

        position: absolute;

        width: 400px;
        height: 400px;     

        background-image: url(img1.png), url(img2.png);

        background-repeat: no-repeat, no-repeat;

        background-position: top center, center center;

        background-color: green;
        border: 1px solid black;

}  

如上样式表所示，包装器在不同位置有两个背景图像。 我想在鼠标单击时更改第二个图像位置，但不更改第一个图像位置。我必须使用什么语法

我的jquery代码：

$("#wrapper").click(function(){
    this.css("background-position": " ? , bottom right " );
});

我认为

？

应该被类似

的东西取代！重要信息

但

！重要信息

不适用于在第一张图像上应用任何更改

---

两幅背景图像的位置将在不同的位置发生变化，我现在不知道第一幅图像的位置是什么，我可以将其位置保存在一个变量中，但如果存在，我宁愿使用本机解决方案

---

有什么建议吗？

使用多个背景时，背景和涉及背景的所有其他属性都是逗号分隔的列表，因此您所要做的就是使用与“不”相同的CSS规则对第一个背景图像的位置进行任何更改：

$("#wrapper").on('click', function(){
    $(this).css("background-position", "top center, bottom right");
});

另一个选项是在类中设置背景位置，只需交换类：

.bg1 {background-position: top center, center center;}
.bg2 {background-position: top center, bottom right;}

-

---

使用多个背景时，背景和涉及背景的所有其他属性都是逗号分隔的列表，因此您所要做的就是使用与“不”相同的CSS规则对第一个背景图像的位置进行任何更改：

$("#wrapper").on('click', function(){
    $(this).css("background-position", "top center, bottom right");
});

另一个选项是在类中设置背景位置，只需交换类：

.bg1 {background-position: top center, center center;}
.bg2 {background-position: top center, bottom right;}

-

---

您需要明确指定两个图像的位置（即使是不变的图像，因为据我所知，无法跟踪哪个图像是哪个图像）：

---

另外，请注意，本机DOM

this

无法使用jQuery方法，您必须使用jQuery

$（this）

对象。

您需要明确指定两个图像的位置（即使是不变的图像，因为据我所知，无法跟踪哪个图像是哪个图像）：

---

另外，请注意，本机DOM

this

无法使用jQuery方法，您必须使用jQuery

$（this）

对象。

您需要读取第一个位置的原始值，然后将其与更改的第二个值一起重新分配

$("#wrapper").click(function(){
   var first = $(this).css("background-position").split(',')[0];
   $(this).css("background-position", first + ", bottom right " );
});

---

您需要读取第一个位置的原始值，然后将其与更改的第二个值一起重新分配

$("#wrapper").click(function(){
   var first = $(this).css("background-position").split(',')[0];
   $(this).css("background-position", first + ", bottom right " );
});

---

更改背景位置2

这将用右下角的

替换第二个背景位置（逗号后）：

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/,(.*)$/, ', bottom right');
    });
});

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/(.*),/, 'bottom right, ');
    });
});

更改背景位置1

这将用右下角的
替换第一个背景位置（逗号前）：

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/,(.*)$/, ', bottom right');
    });
});

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/(.*),/, 'bottom right, ');
    });
});

如果元素只有两个背景，并且我们希望更改每个背景图像的位置或任何其他属性，则此解决方案是一个不错的选择

这将用右下角的
替换第二个背景位置（逗号后）：

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/,(.*)$/, ', bottom right');
    });
});

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/(.*),/, 'bottom right, ');
    });
});

更改背景位置1

这将用右下角的
替换第一个背景位置（逗号前）：

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/,(.*)$/, ', bottom right');
    });
});

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/(.*),/, 'bottom right, ');
    });
});

如果元素只有两个背景，并且我们希望更改每个背景图像的位置或任何其他属性，则此解决方案是一个不错的选择

body {

  background-image:
    url(https://...image1),
    url(https://...image2);

  background-position:
    top 10% left 10%,
    top 10% right 10%;
}

纯CSS：

body {

  background-image:
    url(https://...image1),
    url(https://...image2);

  background-position:
    top 10% left 10%,
    top 10% right 10%;
}

两幅背景图像的位置将在不同的位置发生变化，我不知道第一幅图像的位置现在是什么，我可以将其位置保存在一个变量中，但我更愿意使用本机解决方案，如果存在的话，您可能必须使用类似Michal Klouda的答案！就我个人而言，我从不使用多个背景，我宁愿使用两个元素。两个背景图像的位置将在不同的位置发生变化，我不知道第一个图像位置是什么，我可以将其位置保存在变量中，但我宁愿使用本机解决方案，如果存在的话，你很可能不得不选择像Michal Klouda这样的答案！就我个人而言，我从不使用多个背景，我宁愿使用两个元素。谢谢，两个背景图像的位置将在不同的位置发生变化，我不知道第一个图像的位置现在是什么，我可以将其位置保存在变量中，但我宁愿使用本机解决方案，如果存在，谢谢，两个背景图像的位置将在不同的位置发生变化，我不知道第一个图像的位置现在是什么，我可以将其位置保存在一个变量中，但我宁愿使用本机解决方案，如果存在，则返回此.style.backgroundPosition.replace（/，（.*）$/，'，center'）操作？如何使用此解决方案更改第一个图像位置？感谢执行此操作的人员
返回此.style.backgroundPosition.replace（/，（.*）$/，'，center'）操作？如何使用此解决方案更改第一个图像位置？thanksBe意识到大多数浏览器都会以百分比的形式返回值，而不是“top center”，但它仍然可以工作！请注意，大多数浏览器都会以百分比的形式返回值，而不是“top center”，但它仍然可以工作！