为什么我的这个背景显示不全 而且大小不一样

为什么我的这个背景显示不全  而且大小不一样

            /*任务一、设置不同列表的背景色*/
            li:nth-of-type(1){
            background-color: #02646e;
            }
            li:nth-of-type(2){
            background-color: #eb0837;
            }
            li:nth-of-type(3){
            background-color: #67b374;
            }    
            li:nth-of-type(4){
            background-color: #e6674a;
            }    
            li:nth-of-type(5){
            background-color: #e61061;
            }
            /*任务二、设置缩略图形状*/
            li ::after{
            content:"";
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            z-index: 9999;
            top: -80px;
            }
            /*任务三、设置缩略图背景图像*/
            li:nth-of-type(1) ::after
            {
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
            }
            li:nth-of-type(2) ::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
            }
            li:nth-of-type(3) ::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
            }
            li:nth-of-type(4) ::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
            }
            li:nth-of-type(5) ::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
            }
            /*任务四、给缩略图添加蒙板效果*/
            li ::before{
            content:"";
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            z-index: 99999;
            top: -80px;
            background: rgba(0,0,0,0.3);
            }
            /*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/
            li a:hover::before{
            opacity:0;
            }
            /*任务六、点击综略图，切换背景图*/
            /*背景图从左向右出现*/
            img[id^=bg]:target{
             z-index: 100;
             -webkit-animation-name: slideLeft;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: slideLeft;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: slideLeft;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: slideLeft;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
             animation-name: slideLeft;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }
            /*背景图从下向上出现*/
            img[id^=bg]:target{
             z-index: 100;
            
             -webkit-animation-name: slideBottom;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: slideBottom;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: slideBottom;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: slideBottom;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
            animation-name: slideBottom;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }
            /*背景图由小到大出现*/
            img[id^=bg]:target{
             z-index: 100;
             -webkit-animation-name: zoomIn;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: zoomIn;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: zoomIn;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: zoomIn;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
             animation-name: zoomIn;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }
            
            /*背景图由大到小出现*/
            img[id^=bg]:target{
             z-index: 100;
             -webkit-animation-name: zoomOut;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: zoomOut;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: zoomOut;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: zoomOut;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
             animation-name: zoomOut;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }
            
            /*背景图旋转出现*/
            img[id^=bg]:target{
             z-index: 100;
             -webkit-animation-name: rotate;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: rotate;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: rotate;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: rotate;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
             animation-name: rotate;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }
            /*任务七、设置不显示的背景图层级*/
            /* Not Target */
            
            img:not(:target){
             -webkit-animation-name: notTarget;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: notTarget;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: notTarget;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: notTarget;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
             animation-name: notTarget;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }
        </style>