0

スプライトが表示されない理由を理解できないほど多くのことを試しました。ボタンには、通常、ホバー、アクティブの 3 つの状態があります。

#continue_btn {
    float: right;
    margin-right: 15px;
    width: auto;
    width: 229px;
    height: 43px;
    background-image:url(_img/continue_btn.png);
    background-repeat: no-repeat; 
    float: none;
    margin-left: -23px;
    margin-bottom: 12px;
    border-radius: 8px;    
    }
#continue_btn a{
    background: url(_img/button_sprite.png) 0 0 no-repeat -13px -11px;
    width: 229px;
    height: 43px;
}

continue_btn a:hover {
    background: url(_img/button_sprite.png) 0 0 no-repeat -14px -58px;
    width: 229px;
    height: 43px;
}
continue_btn a:active {
    background: url(_img/button_sprite.png) 0 0 no-repeat -14px -106px;
    width: 229px;
    height: 43px;
}

こちらで確認できます（左上のユーザー入力ボタンをクリックしてください）。これがスプライトです。

4

1 に答える 1

1

まず、最後の 2 つの宣言で先頭のハッシュを忘れていました。

次に、html#continue_btnには入力要素がありますが、cssでは、入力フィールド内に存在aしない (入力はブロックではなくインライン要素であるため、存在しない) ネストされたタグの背景を定義します。

0 0第三に、プロパティの奇妙な宣言を削除する必要がありますbackground。スキームに適合しません。

そして 4 つ目は、_img/button_sprite.png間違った方向を示しています。あなたのケースの URL は です../_img/button_sprite.png。

最後に、次のようなものが必要だと思います。

#continue_btn {
    background: url(../_img/button_sprite.png) no-repeat -13px -11px;
    width: 229px;
    height: 43px;
}

#continue_btn:hover {
    background: url(../_img/button_sprite.png) no-repeat -14px -58px;
    width: 229px;
    height: 43px;
}
#continue_btn:active {
    background: url(../_img/button_sprite.png) no-repeat -14px -106px;
    width: 229px;
    height: 43px;
}
于 2012-12-15T19:27:59.440 に答える