我已经阅读了关于使用css的响应精灵的每一个问题，我看到jsfiddle具有响应精灵的工作示例，但是我仍然不明白如何获得背景位置和背景大小的百分比，如何使用包装器人们说这是必要的)围绕使用背景图像的div，为什么使用它…
例如，如果我有一个宽度为20％(比如40px)并且是一个圆的div。我需要用作背景图像的图像具有80px宽度(一个圆圈，我需要调整大小以适应我的div)，并且是我的精灵图中我拥有的40个图像之一。它位于-173px -293px。
我真的不知道如何使它工作。
我试过了：

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

当然，它没有奏效。我不明白当background-size不是auto时，如何得到background-position-x，background-position-y(我的数字来自“auto”size sprite sheet)，或者背景大小涉及到div大小的百分比。
有什么数学公式可以使用吗？任何人都可以解释一下，还是给我一些网站/书的名字，我可以在哪里学习？
谢谢，

x part     1000px / 80px = 12.5   ->> 1250%
y part      500px / 80px = 6.25   ->>  625%

background-size: 1250% 625%;

x-part     173px / 1000px = 0.173   ->> 17.3%
y part     293px / 500px = 0.586    ->> 58.6%

background-position: 17.3% 58.6%;