我已经阅读了有关使用CSS的响应式精灵的每个问题，我看到jsfiddle带有响应式精灵的工作示例，但是我仍然无法理解如何获取背景位置和背景尺寸的百分比，如何使用包装器（某些人们说有必要）在使用背景图像的div周围以及为什么要使用它…
例如，如果我的div的宽度为20％（例如40px），并且是一个圆形。我需要用作背景图像的图像具有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%;
  }

当然，它没有用。当背景尺寸不是自动时，我不明白如何获取background-position-x，background-
position-y（我的数字来自“自动”尺寸精灵表）或背景尺寸如何与div大小的百分比有关。
我可以使用任何数学公式吗？任何人都可以向我解释一下，或者给我一些可以在其中学习的网站/书的名称吗？
谢谢，