css - 为什么图像精灵采用负坐标作为背景位置

Question

我知道图像精灵中 css 中的流行功能。但我不明白为什么我们必须将背景位置坐标指定为负值。我知道对于任何图像精灵，左上角都是原点。我不明白为什么会这样？为什么不是其他角落，为什么不是图像精灵的中心。如果有任何机构知道这个问题的答案。请帮忙

Answer 1

我们需要一个坐标系来描述图像。计算机成像中使用的坐标系基于位图，而位图根据定义基于网格（行和列），其原点 (x = 0, y = 0) 在左上角（与笛卡尔相反）坐标系，其正空间的原点位于左下方。）

Answer 2

您使用负坐标是因为您希望图像“稍后开始”。

例如，我有一个 100 像素 x 100 像素的图像，以及一个从坐标 40,40 开始的正方形

我想将图像向左和顶部移动 40 像素，所以正方形进入我的视野，我这样做background:url('sprite.png') -40px -40px;