Html Firefox可以'；无法识别复选框的背景图像

我已经放置了一个图像作为复选框的背景。在chrome中一切正常，但当我使用Firefox 32.0.3时，Firefox无法识别背景图像。是不是有什么东西让firefox无法添加到背景图像中

CSS

HTML

---

小提琴。

我通过另一种方法解决了这个问题。我用AngularJS（已经在我的应用程序中）创建了一个span标记和我使用了ng类，根据复选框是否被标记，将背景图像显示到span标记。

我认为可能的重复不会解决我的问题，因为我使用的输入类型是复选框，图像将根据是否单击复选框而改变。除非我在这个问题上遗漏了什么？

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;
  top: 2px;
  position: absolute;
  opacity:0.4;
}

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