jquery - 使用 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'
        });
    }
});