Javascript 是否可以用另一种颜色覆盖背景图像？

我现在想知道是否可以用另一种颜色覆盖背景图像？在我的例子中，我想动态创建4个复选框，当选中这些复选框时，我想更改输入字段的颜色。我试着用下面的代码来修复它，但似乎不起作用

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

---

这将适用于现代浏览器IE9+：

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

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

---

背景图像将置于背景色之上。您还需要设置背景图像：无；您的意思是要更改现有背景图像的颜色，还是在其上方放置纯色，使图像不再可见？@nnnnn在其上方放置纯色，使图像不再可见

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

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