是否可以用其他颜色覆盖背景图像？

Question

I want to now if it is possible to override an background image with another color? In my case I want to create 4 checkboxes dynamically, and when these checkboxes are checked I want the color of the input field changed. I have tried to fix it by the code below, but it seems to not work.

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

This will work for modern browsers, IE9+:

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

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