我已经阅读了关于使用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"大小精灵表),或者背景大小如何与div大小的百分比有关.
我可以使用任何数学公式吗？任何人都可以解释我或给我一些网站/书籍的名称,我可以在那里学习它？
谢谢,