我的第一个图片显示不出来啊？

目前234的动画效果已经是正常实现了的，不知道为什么1没有背景？我的代碼如下：

.cr-bgimg{

width: 600px;

height: 400px;

overflow: hidden;

position: absolute;

top: 0;

left: 0;

z-index: 1;

background-repeat: no-repeat;

}

.cr-bgimg div{

width: 150px;

height: 100%;

float: left;

overflow: hidden;

position: relative;

}

/*demo1的特殊效果*/

.cr-bgimg div span{

width: 100%;

height: 100%;

position: absolute;

left: -150px;

top: 0;

z-index: 2;

transition: all .5s ease;

}

/*圖片的定位*/

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg，

.cr-bgimg div span:nth-child(1){

background:url(../images/1.jpg);

}

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(2){

background:url(../images/2.jpg);

}

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(3){

background:url(../images/3.jpg);

}

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(4){

background:url(../images/4.jpg);

}

/*調整每個小塊的背景*/

.cr-bgimg div:nth-child(1) span{

background-position: 0 0;

}

.cr-bgimg div:nth-child(2) span{

background-position: -150px 0;

}

.cr-bgimg div:nth-child(3) span{

background-position: -300px 0;

}

.cr-bgimg div:nth-child(4) span{

background-position: -450px 0;

}

/*調整每個小塊的位置和動畫*/

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4){

z-index:10;

left: 0;

}