之前总是匆匆看过，如今终于知道该怎么搞了。。。

**利用label挂钩checkbox的特点来实现。
当html代码中，label的for属性值和checkbox的id值一样的时候，label就可以控制checkbox的选择了。
为label的伪元素添加背景图片，覆盖真正的checkbox对象，这样，既有图片的美观效果，又有checkbox一切的交互行为。
这里使用了定位，不然不能覆盖原始的复选框。而且文字和图片之间要间隔，文字也需要设置为定位对象。总之，这里都是定位关系。**

设计一个图片如下，默认状态，点击状态，不可用状态。

input[type=checkbox]+label:before{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    background:url(images/btn1.png) no-repeat;
    }
input[type=checkbox]:checked+label:before{
    background-position:-28px 0;}
input[type=checkbox]+label span{
    font-size:14px;
    position:absolute;
    left:30px;}

#check{     position:relative;}//对父元素坐定位，使下面对父元素为起点

结构是