css - css の背景位置

Question

1 回のナビゲーションで 2 つ以上の画像を使用できますか。つまり、その画像にカーソルを合わせると、6 つの異なる画像が表示されます。単一のナビゲーション画像を作成することは可能ですか? 可能であれば、どのように意味しますか?

これは皆さんお分かりだと思いますが

score 3 · Accepted Answer

私の理解が正しければ、1 つのボタンにカーソルを合わせている間、背景画像の位置を継続的に変更したいと考えているはずです。

そうであれば、静止画像を背景画像として作成し、ホバー時に画像をGIFアニメーション画像に変更することをお勧めします

score 1 · Accepted Answer

(現時点では - クロスブラウザで) 1 つの要素に 1 つの bg 画像のみを設定できます。ホバーなどで変更したい場合は、 set on でa-tag を追加するだけです:href#

<a class="img" id="thatoneimg" href="#"></a>

そしてCSSで：

a.img {
  幅: 100px;
  高さ: 100px;
}
a#thatoneimg {
  背景画像: url(staticimg.jpg);
}
a#thatoneimg:hover {
  背景画像: url(movingimg.gif);
}

それはクロスブラウザで動作するはずです。aIE で動作させるには -tagが必要です。

編集: Starx が言ったように、2 番目の画像をアニメーション付きの .gif にするだけです。スプライトは使用しませんが、機能します。

score 0 · Accepted Answer

質問が正しければ可能ですが、6 つの異なる位置に背景画像を含めるには、6 つの異なる HTML 要素が必要です。

3 に答える 3