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

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

更改背景位置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, ');
    });
});

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

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

4 个答案: