배경 이미지를 다른 색상으로 덮어 쓸 수 있습니까?

Question

다른 색상으로 배경 이미지를 덮어 쓸 수 있다면 지금 원하니? 필자의 경우 4 개의 체크 박스를 동적으로 만들고 싶습니다.이 체크 박스를 선택하면 입력 필드의 색상이 변경됩니다. 나는 아래의 코드로 그것을 고치려고 노력했지만 작동하지 않는 것 같다.

Live Demo

JQuery와 :

var $div = $('<div />') 
$('<input/>', { 
     "type": "text", 
      "class": "checkBoxCard" 
    }).appendTo($div); 


$("#Getbtn").on("click", function() { 

     CheckBoxesChecked(); 

     $('#modalDialog').dialog("close"); 
    }); 

function CheckBoxesChecked() { 
     var numAll = $('input[type="checkbox"]').length; 
     var numChecked = $('input[type="checkbox"]:checked').length; 

     if (numChecked == numAll) { 

      $('.checkBoxCard').css("background-color", "yellow"); 
     } 
    } 

가 CSS :

.checkBoxCard { 
background-image: url(http://static3.depositphotos.com/1004899/246/i/950/depositphotos_2465679-Cream-handmade-sheet-of-paper.jpg); 
} 

Answer 1

이 현대적인 브라우저에서 작동합니다, IE9가 + :

.checkBoxCard { 
    background: #eee url(img.png) 0 0 no-repeat; 
} 

.checkBoxCard:checked { 
    background-image: none; 
    background-color: yellow; 
}