Question

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

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

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

Answer 1

使用此选项删除第一个背景：

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

Answer 2

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

Answer 3

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

Answer 4

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

最顶层的背景图片是以逗号分隔的网址列表中的first。在每个,拆分字符串会得到一个包含所有网址的数组。 slice(1)返回一个包含所有项目的数组。

join(',')将该数组转换回项目之间,的字符串。

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

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

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

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

4 个答案: