html - 创建一个背景在顶部的透明复选框

Question

我有一个要用图像替换的复选框。我能够成功地让图像与复选框重叠。问题是图像具有透明背景，因此导致用户仍然看到复选框。有什么方法可以在我仍然保持图像背景的同时使实际的复选框不可见。

CSS

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

HTML

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

fiddle here .

Answer 1

更正......

我添加了此 background-color: #fff !important; 以使“按钮框”不可见或为白色，无论哪种方式，它都会替换按钮框显示。 (不知道为什么，但如果你不添加 content: ""; 它不起作用:/)