CSS 精灵中的“背景位置”使用负值

Question

我的问题是关于 background-position 属性的负值。

我正在阅读 Jon Duckett 的 HTML 和 CSS，我有以下 sprite，其中每个按钮的高度为 40px。

我还从书中生成了一些以下代码，以在用户悬停并单击这些按钮时激活这些精灵。

  a.button {
   height: 36px;
   background-image: url("https://image.ibb.co/jnHrwk/button_sprite.jpg");
   text-indent: -9999px;
   display: inline-block;
  }
  a#add-to-basket {
   width: 174px;
   background-position: 0px 0px;
  }
  a#framing-options {
   width: 210px;
   background-position: -175px 0px;
  }
  a#add-to-basket:hover {
   background-position: 0px -40px;
  }
  a#framing-options:hover {
   background-position: -175px -40px;
  }
  a#add-to-basket:active {
   background-position: 0px -80px;
  }
  a#framing-options:active {
   background-position: -175px -80px;
  }

<!DOCTYPE html>
<html>
<head>
 <title>Image Rollovers and Sprites</title>
</head>
<body>
 <a class="button" id="add-to-basket">Add to Basket</a>
 <a class="button" id="framing-options">Framing Options</a>
</body>
</html>

现在，在示例代码中，要选择框架选项，属性 background-image 被赋予值 -175px 0px。

但是，我认为通过CSS中的坐标系查看图像如下所示，我认为向右走，应该是175px 0px，然后往下走40 像素，175px 40px。

为什么在此示例中向左和向下给出负值？

Answer 1

你其实就是moving/translating坐标系中的精灵图。改编自 css sprite with negative background positions not clear 的答案，要在 x=50 和 y=20 的位置显示图像，请将精灵 -50 移动到坐标系的左侧，将 -20 移动到坐标系的顶部。

-50, -20
|-----------------------------------------------|
|                                               |
|       0,0                                     |
|       |--                                     |
|       |                                       |
|                                               |
|                                               |
|                                               |
|-----------------------------------------------|

CSS 精灵中的“背景位置”使用负值

`background-position` in CSS sprites using negative values

html

css

background-image