無法解決CSS精靈問題

我不知道我在做什麼錯，對我來說代碼似乎是正確的，但我想這不是或否則它會工作。實際的精靈按鈕沒有顯示在瀏覽器中，我可以點擊看不見的按鈕，但我無法看到它，我不知道如何解決它。需要幫助。無法解決CSS精靈問題

這裏的CSS

@charset "UTF-8"; 
/* CSS Document */ 
a.button 
{ 
    height: 48px; 
    background-image: url("images/Home.png"); 
    text-indent: -9999px; 
    display: inline-block; 
} 

#home 
{ 
    width: 186px; 
    background-position: 0px 0px; 
} 

#home:hover 
{ 
    background-position: 0px -40px; 
} 

#home:active 
{ 
    background-position: 0px -80px; 
}

這裏的HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen"> 
</head> 

<body> 
<a href="#" class="button" id="home">Home</a> 
</body> 
</html>

來源

2013-10-19 Robert

你有一個鏈接到這個？ –

不，我沒有鏈接 – Robert

沒有什麼錯與您的代碼。但是，你並不需要text-indent: -9999px; ..只是不要在其中放置任何文本。

它必須是您的圖片位置"images/Home.png"一定不是正確的道路。

看看會發生什麼，當我切換圖像：http://jsfiddle.net/KAHwf/

來源

2013-10-19 05:28:30

現在的問題是爲什麼它在我的路上遇到困難？該路徑在HTML標記中起作用，但不是CSS – Robert

您的CSS與頁面位於同一位置嗎？ –

是的，一切都在相同的位置。 – Robert

無法解決CSS精靈問題

回答

相關問題