-3

この画像でcssスプライトを作りたい

http://oi49.tinypic.com/14nobhd.jpg

私のhtmlコード;

<div class="top"></div>
<div class="bottom"></div>
<div class="right"></div>
<div class="left"></div>

そしてcssコード;

.left{
background : url(arrw.png) no-repeat 0 0;
width:12px;
height:19px;
}

.right{
background : url(arrw.png) no-repeat -29px 0;
width:12px;
height:19px;
}

.top{
background : url(arrw.png) no-repeat -12px 0;
width:16px;
height:12px;
}

.bottom{
background : url(arrw.png) no-repeat -12px -12px;
width:16px;
height:12px;
}

それは完璧に機能しますが、背景の位置に負の値を与える理由がわかりません。それは座標系ではなく、これに正の値を与える必要はありませんか? 位置の値は 0 0 (左上) から始まり、正の値を取る必要がありますね。何が問題なのですか?

4

2 に答える 2

2

使用しているスプライト画像は、通常、それらを表示するボックスよりも大きくなります。画像を含めるだけの場合、左上に配置されます。ボックスの右側にはみ出す画像の部分を表示したい場合は、画像を左側に移動する必要があります。ただし、画像はデフォルトですでに にleft: 0;あるため、さらに左に移動するには負の値を設定する必要があります。

2 枚の紙を考えてみてください。1 枚は穴が開いていて、もう 1 枚は最初の紙の後ろで動き回っています。リアシートの右下にある部分を見るには、左上に移動する必要があります。そのため、穴から見たり、ボックスに画像を表示したりする場合は、リアシートを動かしたい方向と位置の方向が逆になります。

于 2012-12-13T13:07:18.270 に答える
0

さて、位置が 0 0 の背景画像を含む div を取得します。それに加えて、下と右に移動します。減算すると、上と左に移動します。0 0 はそのシステムのベースです。

それが気になる場合は、コードを次のように変更できます。

.left{
background : url(arrw.png) no-repeat top left;
width:12px;
height:19px;
}

.right{
background : url(arrw.png) no-repeat top right;
width:12px;
height:19px;
}

.top{
background : url(arrw.png) no-repeat top center;
width:16px;
height:12px;
}

.bottom{
background : url(arrw.png) no-repeat bottom center;
width:16px;
height:12px;
}
于 2012-12-13T13:10:23.973 に答える