0

何が間違っているのかわかりません。コードは正しいように見えますが、そうではないか、そうでなければ機能していると思います。実際のスプライト ボタンがブラウザに表示されません。非表示のボタンをクリックすることはできますが、表示されず、修正方法もわかりません。助けが必要です。

ここに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>
4

1 に答える 1

0

コードに問題はありません。ただし、実際には .. は必要ありませんtext-indent: -9999px;。テキストを入れないでください。

画像の場所"images/Home.png"が正しいパスであってはなりません。

画像を切り替えるとどうなるか見てみましょう: http://jsfiddle.net/KAHwf/

于 2013-10-19T05:28:30.477 に答える