-1

.pngの背景を変更するために、内部に複数のオブジェクトがリストされた単一のファイルを使用しようとしています:hover。私が慣れ親しんでいる他のファイルとの違いは、このファイル内のオブジェクトは、互いの下ではなく、互いに隣り合ってリストされていることです。そのようなファイルを使用することは可能ですか、それとも画像ファイル内のオブジェクトが互いに下にあることが必須ですか?

これは、オブジェクトが互いに下にあるときに画像ファイルを使用する方法です。

.example.div {
  background : transparent url('img/info.png') bottom right no-repeat;
}

.example.div :hover {
  background : transparent url('img/info.png') top right no-repeat;
}

リストされた画像ファイル内に2 つのオブジェクトが隣り合っている場合、どのように機能しますか?

ファイルサイズ例：123x25px

4

3 に答える 3

3

コーディネートに使えます。

背景位置: 0px 0px;

したがって、画像が 200x100 (2 つの 100x100 正方形) の場合は...

.example.div {
  background : transparent url('img/info.png') no-repeat;
  background-position: 0px 0px;
}

.example.div :hover {
  background : transparent url('img/info.png') no-repeat;
  background-position: 100px 0px;
}
于 2013-10-24T22:14:22.450 に答える
1

画像のレイアウトに合わせて画像の位置を変更するだけです。

あなたは下から上に行きます、あなたは左から右に行きたいだけです.

.example.div {
  background : transparent url('img/info.png') top left no-repeat;
}

.example.div:hover {
  background : transparent url('img/info.png') top right no-repeat;
}

またはそのようなもの

デモを見る:

http://jsfiddle.net/bdyNX/

于 2013-10-24T22:13:07.083 に答える
0

2 つの 100px X 100px の画像を並べて含む 200px X 100px のスプライトがあるとします。

次に、各 (100X100) 画像を個別に表示します。

最初の画像はbackground-position: 0 0;

2番目の画像にはbackground-position: -100px 0;（NB： x値の-100px）があります

フィドル

ここに画像の説明を入力

于 2013-10-24T22:27:15.110 に答える