我不知道我做错了什么，对我来说代码似乎是正确的，但我猜它不是，否则它会起作用。实际的 sprite 按钮没有出现在浏览器中，我可以点击不可见的按钮但我看不到它，我不知道如何修复它。需要帮助。
这是 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>
最佳答案
您的代码没有任何问题。但是，您实际上并不需要 text-indent: -9999px; ..只是不要在其中放置任何文本。
必须是你的图片位置 "images/Home.png" 不能是正确的路径。
看看我切换图像时发生了什么:http://jsfiddle.net/KAHwf/
关于html - 无法解决 CSS Sprite 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19462596/