Css 复选框图像覆盖

我只需要使用CSS的复选框的帮助

首先，它工作正常。但是，我想在单击按钮时将选中的图像覆盖在未选中的图像的顶部。如何做到这一点

.gchoice_1_1_3{边框：1px纯红；}
.gchoice_1_1_3输入[type=“checkbox”]{显示：无；}
.gchoice_1_1_3输入[type=“checkbox”]+标签：在{
背景：url（'http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png'）0 0px无重复；
z指数：10；
内容：“；
显示：内联块；
字体大小：12px；
高度：75px；
宽度：75px；
线高：16px；
余量：-2px6px0；
文本对齐：居中；
垂直对齐：中间对齐；
相对位置；
边界半径：10px；
背景色：#6283B2；
}
.gchoice_1_1_3输入[type=“checkbox”]：选中+标签：之前{
背景：url（'http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png'）0 0px无重复；
高度：75px；
宽度：75px；
边界半径：10px；
背景色：#37924A；
}

圣诞灯

您可以使用多种背景。
但一定要检查浏览器支持和背景应用顺序的问题

.gchoice_1_1_3{边框：1px纯红；}
.gchoice_1_1_3输入[type=“checkbox”]{显示：无；}
.gchoice_1_1_3输入[type=“checkbox”]+标签：在{
背景：url（'http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png'）0 0px无重复；
z指数：10；
内容：“；
显示：内联块；
字体大小：12px；
高度：75px；
宽度：75px；
线高：16px；
余量：-2px6px0；
文本对齐：居中；
垂直对齐：中间对齐；
位置：相对位置；
边界半径：10px；
背景色：#6283B2；
}
.gchoice_1_1_3输入[type=“checkbox”]：选中+标签：之前{
背景：url（'http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png'），网址（'http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png'）0 0px无重复；
高度：75px；
宽度：75px；
边界半径：10px；
背景色：#37924A；
}

圣诞灯

相对位置；。。。应该是位置：相对；