Question

我不知道我做错了什么，对我来说代码似乎没错，但我猜它不是，否则它会起作用。实际的精灵按钮没有显示在浏览器中，我可以点击隐形按钮，但我无法看到它，我不知道如何解决它。需要帮助。

这是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>

Answer 1

您的代码没有任何问题。但是，您并不需要text-indent: -9999px; ..只是不要在其中添加任何文本。

必须是您的图片位置"images/Home.png"一定不是正确的路径。

看看切换图片时会发生什么：http://jsfiddle.net/KAHwf/

无法解决CSS sprites问题

1 个答案: