버튼에 스프라이트가 나타나는 문제

Question

스프라이트가 표시되지 않는 이유를 알 수없는 많은 시도를했습니다. 버튼에는 정상, 마우스 오버, 활성 중 세 가지 상태가 있습니다.

#continue_btn { 
    float: right; 
    margin-right: 15px; 
    width: auto; 
    width: 229px; 
    height: 43px; 
    background-image:url(_img/continue_btn.png); 
    background-repeat: no-repeat; 
    float: none; 
    margin-left: -23px; 
    margin-bottom: 12px; 
    border-radius: 8px;  
    } 
#continue_btn a{ 
    background: url(_img/button_sprite.png) 0 0 no-repeat -13px -11px; 
    width: 229px; 
    height: 43px; 
} 

continue_btn a:hover { 
    background: url(_img/button_sprite.png) 0 0 no-repeat -14px -58px; 
    width: 229px; 
    height: 43px; 
} 
continue_btn a:active { 
    background: url(_img/button_sprite.png) 0 0 no-repeat -14px -106px; 
    width: 229px; 
    height: 43px; 
} 

You can see it here (왼쪽에서 사용자 입력 버튼 클릭). This is the sprite.

Answer 1

첫째, 지난 두 번의 선언에서 앞서가는 해시를 잊어 버렸습니다.

둘째, 귀하의 HTML에 #continue_btn 입력 요소이지만, (입력 block하지만 inline 요소가 아니므로, 그리고 수 없습니다) 당신의 CSS에서 당신이하지 않는 일부 중첩 a 태그에 배경을 정의하여 입력 필드 내부에 존재하는 .

셋째, 이상한 0 0 속성을 background 속성에서 제거해야하며 스키마에 맞지 않습니다.

네 번째, _img/button_sprite.png은 잘못된 방향을 가리 킵니다. 케이스 URL은 ../_img/button_sprite.png입니다.

#continue_btn { 
    background: url(../_img/button_sprite.png) no-repeat -13px -11px; 
    width: 229px; 
    height: 43px; 
} 

#continue_btn:hover { 
    background: url(../_img/button_sprite.png) no-repeat -14px -58px; 
    width: 229px; 
    height: 43px; 
} 
#continue_btn:active { 
    background: url(../_img/button_sprite.png) no-repeat -14px -106px; 
    width: 229px; 
    height: 43px; 
}