响应式精灵/百分比

Question

我已经阅读了有关使用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大小的百分比有关。
我可以使用任何数学公式吗？任何人都可以向我解释一下，或者给我一些可以在其中学习的网站/书的名称吗？
谢谢，

Answer 1

div维度不会在演算中发挥作用，只会在背景大小和您将要使用的部分中发挥作用。

假设您的背景宽度为1000像素，高度为500像素。

您将使用的图像的宽度和高度为80px。

背景大小：

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%;