0

アンカー タグの状態ごとに異なる画像を表示しようとしていますが、うまくいきません。ここで何が欠けているかについてのアイデアはありますか?

これが画像です=>画像を投稿できませんが、480x30ピクセルです

CSS は次のとおりです。

a.image {
background-repeat:no-repeat;
color:white;
display:inline-block;
width:160px;
height:30px;
margin-left:-12px;
margin-top:16px;
padding-top:6px;
text-align:center;
font-size:14px;
font-weight:bold;
cursor:pointer;
text-decoration:none;
}

a.image:link {
background-image:url('images/buttons.png');
background-position:0px 320px;
}

a.image:visited {
background-image:url('images/buttons.png');
background-position:0px 0px;
}

a.image:active {
background-image:url('images/buttons.png');
background-position:0px 160px;
}

HTML は次のとおりです。

<a href='ifp.asp?width=1512&ProjectGroupID=&ProductID=536&model=Addison 536&plan=Lower Level Plan' class='image'>Lower Level Plan</a>

現在、白いテキストで「Lower Level Plan」のみを取得しています。ありがとう！

4

1 に答える 1

1

スプライトが 480 W x 30 H の場合、X 軸で背景位置を変更する必要があるときに、Y 軸で背景位置を変更しています。また、-X 寸法を使用して、スプライトをシフトする必要があることを示す必要があります。負の方向 (左へ) したがって、次のように書き換えることができます。

a.image:link {
background-position:-320px 0px;
}

a.image:visited {
background-position:0px 0px;
}

a.image:active {
background-position:-160px 0px;
}

ここで background-image 宣言も削除したことに注意してください。これは単純に a.image スタイル ブロックに移動できるためです。

于 2012-08-15T19:41:15.990 に答える