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'"}); 
} 
}); 

첫 번째 경우 절

는 간단하다 : 캔버스에 아무런 배경 이미지가 없습니다 그래서 우리가해야 할 모든 기존의 색상을 포함하고 그리드를 추가하는 CSS-배경 문을 만드는 것입니다. 그건 잘 작동합니다.

두 번째 경우에는 배경 이미지가 있으므로 기존 이미지와 그리드 이미지를 적용하는 CSS 배경 호출을 만들고 싶습니다. 나는 내가 가지고있는 것이 근본적으로 바른 길에 있다고 생각하지만, 따옴표들은 나를 넘어 뜨리고있다.

누구나 올바른 방법을 알고 있습니까?

감사

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