使用 Jquery 删除多个背景图像之一答案

【问题标题】：Remove one of multiple background images using Jquery使用 Jquery 删除多个背景图像之一
【发布时间】：2014-10-24 00:08:41
【问题描述】：

在 css3 中使用多层背景时，如何在点击事件中使用 jquery 剥离图层？

body {
background:url(./images/bg2.jpg), url(./images/bg1.jpg);
}

所以在这种情况下，一个背景将显示在另一个背景之上。我想使用 jquery 来删除顶部背景。有什么想法吗？

【问题讨论】：

$("body").css("background","url(./images/bg2.jpg)");应该工作
@user733421，这是相当具体的。不确定 OP 是否知道图像层的 URL。

标签： jquery css background background-image

【解决方案1】：

使用它来移除第一个背景：

var bg = $("body").css("background");
var bgs = bg.split(',');
bgs.splice(0,1);
$("body").css("background", bgs.concat());

【讨论】：

【解决方案2】：

 var currentsBodyBg = $('body').css('background');
    // DELETE every backgrounds after the first;
    var new =currentsBodyBg.replace(/,.*/gi, ";"); 
    $('body').css('background', new);

【讨论】：

【解决方案3】：

    var b = $('body');
    var images = b.css('background-image').split(',');
    b.css('background-image', images[1]);

【讨论】：

【解决方案4】：

您必须使用background-image 而不是background，否则返回的字符串还包含no-repeat top left scroll transparent 或其他内容。

最上面的背景图片是逗号分隔的网址列表中的first。在每个 , 处拆分字符串会给出一个包含所有 url 的数组。 slice(1) 返回一个数组，其中包含第一个之后的所有项。

join(',') 将该数组转换回字符串，并在项目之间添加,。

var $body = $("body");
var imgs = $body.css("background-image").split(',');
$body.css("background-image", imgs.slice(1).join(','));

你可以将它作为一个单行，但有一个缺点：$("body") 被创建了两次：

$("body").css({backgroundImage: $("body").css("backgroundImage").split(',').slice(1).join(',')});

【讨论】：