為什么我的這個背景顯示不全 ?而且大小不一樣

????????????/*任務一、設置不同列表的背景色*/
????????????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>