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

Question

我有一个简单的 HTML：<div id="wrapper"></div> 和这个样式表：

#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;

}  

如上样式表所示，#wrapper 有两个不同位置的背景图像。 我想在鼠标单击时更改 第二个 图像位置对第一个图像位置不应用任何更改。我必须使用什么语法？

我的 jquery 代码：

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

我认为 ? 应该替换为 !important 但 !important 不适用于对第一张图像应用不更改。

两个背景图像的位置会在不同的地方发生变化，我现在不知道第一个图像位置是什么，我可以将它的位置保存在一个变量中，但我宁愿使用原生解决方案，如果存在
有什么建议吗？

Answer 1

改变背景位置 2

这会将第二个背景位置（逗号后）替换为bottom right：

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

改变背景位置 1

这会将第一个背景位置（逗号之前）替换为bottom right：

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

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

Answer 2

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

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

另外，请注意原生 DOM this 不能使用 jQuery 方法，您必须使用 jQuery $(this) 对象。

Answer 3

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

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

Answer 4

使用多个背景，背景和涉及背景的所有其他属性都是逗号分隔的列表，因此您所要做的就是使用与“不”相同的 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;}

-

$("#wrapper").on('click', function(){
    $(this).toggleClass('bg1 bg2');
});

Answer 5

纯 CSS：

body {

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

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