css - 响应 Sprite /百分比

Question

我已经阅读了关于使用 css 的响应式 Sprite 的每一个问题，我看到了 jsfiddle 和响应式 Sprite 的工作示例，但我仍然不明白如何获得背景位置和背景大小的百分比，如何使用使用背景图像的 div 周围的包装器(有些人说这是必要的)以及为什么要使用它......
例如，如果我有一个宽度为:20%(比如 40px)并且是一个圆的 div。我需要用作背景图像的图像具有 80px 宽度(一个圆，我需要调整它的大小以适合我的 div)并且是我的 sprite 表中的 40 张图像之一。它在-173px -293px的位置。
我真的不知道如何让它发挥作用。
我试过:

div {
  width:20%;
  border-radius:50%;
  background: url('images/sprites.png') no-repeat 72.083% 67.981%;
  background-size: 50%;
  }

当然，这并没有奏效。我不明白当背景大小不是自动时如何获取背景位置 x、背景位置 y(我拥有的数字来自“自动”大小 Sprite 表)，或者背景大小如何与div大小的百分比有关。
有没有我可以使用的数学公式？任何人都可以解释一下或给我一些我可以学习的网站/书籍的名称吗？
谢谢，

Answer 1

@vals 回答的更新。他的一些计算对我来说不太适用。

背景大小计算成功了，除了他乘以 1000 而不是 100 以获得最终的百分比数字。所以 12500% 应该是 1250% 等等。 (更新:10/2015 - 看起来@vals 已经在他的回答中纠正了这个问题。)

背景位置 X 值计算对我来说略有偏差。它们与 spritecow.com 生成的内容不匹配(根据 Adrian Florescu 的建议)。我认为这是因为绝对坐标是从背景图像的左侧计算的，而对于百分比，您必须从背景图像的右侧计算。在这种情况下，您必须从整体背景宽度中减去图像宽度，然后再用它除以绝对 x-pos 数。

所以代替:

x-part 173px / 1000px = 0.173 ->> 17.3%

这样做:

x-part 173px / (1000px - 80px) = 0.1880434783 ->> 18.80434783%

地点:

1000px是背景图片( Sprite )的宽度

80px是显示图片的宽度

173px 是显示图像的绝对 x 坐标。

无论如何，这对我有用!