出現在按鈕上的精靈問題

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輸入元素，但在你的CSS定義背景一些嵌套a標籤，它不會（也不能，因爲輸入不block但inline元素）存在於您的輸入字段內。

三，我應該刪除奇怪的0 0聲明background屬性，它不符合方案。

第四，_img/button_sprite.png指向錯誤的方向。您的案例的網址是../_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; 
}