0

こんにちは、css スプライトについて誤解があります。次のような 1 つのボタンが必要です (緑色のチェックマークでホバーします。これらの 2 つの画像を背景の URL と背景の位置を持つスプライトに組み合わせて使用​​すると、魅力的に機能します。

写真の説明へのリンク 申し訳ありませんが、写真を投稿するのに十分な評判がありません

しかし、私の問題は、ボタンが背景で構成されていることです

チェックマークが付いたスプライトをその上に置きます（偽）

ただし、同じことを行う方法はありませんが、ホバーステータスがあります（真のチェックマーク）

私のHTML

<div class="sprite sprite-novalid"> </div>
<input type="button" id="cancel" value="Cancel" name="button" onclick="" class="btn" title="Cancel [Alt+X]">

My CSS : チェックマークのない背景ボタン用

.btn,input[type="button"],.btn{ 
background-color:#ECF1F4;
background-image:url(http://);
border-color:#ABC3D7;
color:#000000}

.btn, input{
border-radius:12px;
height: 31px;
width: 180px}

私のcss：スプライト用

.sprite {
background: url(http://); 
no-repeat;}

私のcss：偽のチェックマーク（灰色）

.sprite-novalid {
width: 19px;
height: 16px;
background-position: -31px 2px;
position: absolute;
display: inline-block;
bottom: 134px;
left: 21px;}

ホバーCSSについては、エラーが多すぎるため何も入れませんでした

アドバイスをくれた皆さん、または/そして私を正しい軌道に乗せてくれてありがとう。

よろしくディミトリ

4

1 に答える 1

0

問題を理解しているかどうかはよくわかりませんが、 :hover でスプライトを上下にシフトすることができます..

.btn:hover{
width: 19px:
height: 16px;
background-position: ?px ?px;
/* some other styles you want*/
}

したがって、必要なのは、関連するすべての画像を含むスプライト (ボタン全体とそのバリエーションを 1 つのスプライトに作成する) だけであり、必要に応じてそれらを移動します。次に、非アクティブ ボタン用の css クラスと :hover 用の css クラスが必要です。この男はそれを非常によく説明していますhttp://line25.com/tutorials/how-to-build-a-simple-button-with-css-image-sprites

これがお役に立てば幸いです-そうでなければ、将来の質問でフィドルのデモがいいでしょう。私の回答が表示されるまでに問題が解決されない場合は、私が確認できるように作成してください:)

于 2014-03-17T13:30:33.493 に答える