Html 创建背景位于顶部的透明复选框

我有一个复选框，我想替换为一个图像。我能够成功地使图像与复选框重叠。问题是图像有一个透明的背景，因此用户仍然可以看到复选框。是否有任何方法可以使实际复选框不可见，而我仍然保持图像背景

CSS

HTML

小提琴

已更正

---

我添加了这个

背景色：#fff！重要的使“按钮框”不可见或为白色，无论哪种方式，这都会替换按钮框显示。（不知道为什么，但如果您不添加
内容：；
它不起作用：/）
我仍然需要它作为复选框，因此该选项不可行。抱歉：（.已更新。检查时您仍然可以看到检查，因为我不知道您是否需要图像，或者只是留下它；您说图像是透明的，因此可以是……如果不向我解释更多细节，您希望看到这样的情况
input[type=checkbox]:before { 
  content:""; 
  display:inline-block; 
  width:12px; 
  height:12px; 
  background-image: url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg'); 
  background-size: 12px; 
}

<input type="checkbox" id="chk1" />