0
私の質問は、background-positionプロパティの負の値です。CSSスプライトの負の値を使用した `background-position`
私はHTMLとCSSをJon Duckettが読んでいますが、各ボタンの高さが40pxの次のスプライトがあります。
私はまた、ユーザのホバーと、これらのボタンの上にクリックこれらのスプライトを活性化するために本からいくつかの次のコードを生成。
\t \t a.button {
\t \t \t height: 36px;
\t \t \t background-image: url("https://image.ibb.co/jnHrwk/button_sprite.jpg");
\t \t \t text-indent: -9999px;
\t \t \t display: inline-block;
\t \t }
\t \t a#add-to-basket {
\t \t \t width: 174px;
\t \t \t background-position: 0px 0px;
\t \t }
\t \t a#framing-options {
\t \t \t width: 210px;
\t \t \t background-position: -175px 0px;
\t \t }
\t \t a#add-to-basket:hover {
\t \t \t background-position: 0px -40px;
\t \t }
\t \t a#framing-options:hover {
\t \t \t background-position: -175px -40px;
\t \t }
\t \t a#add-to-basket:active {
\t \t \t background-position: 0px -80px;
\t \t }
\t \t a#framing-options:active {
\t \t \t background-position: -175px -80px;
\t \t }<!DOCTYPE html>
<html>
<head>
\t <title>Image Rollovers and Sprites</title>
</head>
<body>
\t <a class="button" id="add-to-basket">Add to Basket</a>
\t <a class="button" id="framing-options">Framing Options</a>
</body>
</html>次に、コード例では、フレーミングオプションを選択し、プロパティbackground-imageは値-175px 0pxが与えられます。
しかし、以下のように画像がCSSの座標系を介して表示されるので、私は右に行くと思っていました。175px 0pxとなり、40px、175px 40pxになります。
なぜ左に行くとダウンこの例では負の値を与えていますか？
背景のデフォルト値は0です。 xに正の値を設定すると、負の場合は左に移動し、yの正の場合は上に移動し、負の場合は下に移動します。 -175px -40pxが左右に移動します。正または負のマージンを設定したときのように。負の値を設定すると、反対の余白になります。 – bdalina