css - 将背景图像添加到现有图像

Question

我的复选框包含一个背景图像，当它被点击时，我希望它上面出现一个正号。

我考虑在原始图像之上添加第二个具有透明背景的 GIF 图像。单击时应出现正号背景图像，再次单击时应消失。

一般来说，可以通过逗号分隔 2 个背景图像：

background: url(image1.png) , url(image2.png);

是否可以使用 CSS 仅将一个添加到现有的？

我希望我能清楚地解释自己。谢谢

附上简单示例：http: //picturepush.com/public/10656582

Answer 1

您可以使用 CSS 精灵，在选中时使用两个图标更改图像的背景位置。一般来说，复选框中的图像在浏览器中并不能得到很好的支持。您可能不得不在包装元素上执行此操作。

Answer 2

嗯不完全确定你是如何做到这一点的。如果您想要一种在 CSS 中定位复选框输入的方法，那么您可以使用

input[type=checkbox] {

}
input[type=checkbox]:checked {

}

如果您真的可以在复选框上使用背景图像，那么您可以使用第一个仅包含一个图像，然后 :checked 将同时包含两个图像。这样，当您选中一个复选框时，它将应用 :checked 中的内容，并在另一张图像的顶部加上加号。