使用jQuery应用多个背景图像

Question

我有一个网格按钮，人们可以单击以在“画布”区域上应用网格（与CSS3画布无关）。按钮处理程序如下所示，但它不起作用。

当我们到达时，画布可以具有背景颜色而没有图像，或者它可以具有图像背景。在任何一种情况下，我们都需要使用网格图像 - images / snapGrid2.gif - 在顶部。

$("#grid_button").click(function(e) { 
var bgc = $('#canvas').css('background-color');
var bgi = $('#canvas').css('background-image');
if(bgi == 'none') {
    $('#canvas').css({'background' : bgc + 'url(images/snapGrid2.gif) left top'});
}
else {
    $('#canvas').css({'background' : "bgi + ',url(images/snapGrid2.gif) left top'"});
}
}); 

第一个if子句更简单：画布上没有背景图像所以我们需要做的就是创建一个包含现有颜色的css-background语句并添加网格。这很好。

在第二种情况下，有一个背景图像，因此我们要创建一个css-background调用，它应用现有图像，然后应用网格图像。我认为我所拥有的基本上是在正确的轨道上，但是报价正在绊倒我。

有人看到了正确的方法吗？

由于

Answer 1

试试这个： -

$("#grid_button").click(function (e) {
    var bgc = $('#canvas').css('background-color');
    var bgi = $('#canvas').css('background-image');
    if (bgi == 'none') {
        $('#canvas').css({
            'background': bgc + 'url(images/snapGrid2.gif) left top'
        });
        bgi = $('#canvas').css('background-image');
    } else {
        $('#canvas').css({
            'background': bgi + ',url(images/snapGrid2.gif) left top'
        });
    }
});