响应精灵/百分比

Question

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

Answer 1

@vals回答的更新.他的一些计算方法并不适合我.

背景大小的计算工作,除了他乘以1000而不是100来得到最终的百分比数字.所以12500%应该是1250%,依此类推.(更新:2015年10月 - 看起来@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是背景图像的宽度(精灵)

80px是显示图像的宽度

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

无论如何,这对我有用!

Answer 2

div维度不会在微积分中播放,只会在背景大小和您要使用的部分中播放.

让我们说你的背景宽度为1000像素,高度为500像素.

您要使用的图像宽度和高度均为80像素.

背景大小:

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

Answer 3

我编写了一个响应式CSS Sprite Generator来处理所有工作.你可以上传一堆图像,它会给你一个精灵图像和它的CSS.

它使用一种新颖的方法使精灵响应 - 一个带有透明PNG的数据src,使图像保持其纵横比,因此与其他方法不同,图像不需要是方形或全部相同的比例.

Answer 4

这是一个更简单的解决方案，检查这个

\n\n

.my_picture{\n    //target your sprite\n    background: url(my_img.jpg) no-repeat;\n\n    //Specify it full image\n    backgound-size: 100%;\n\n    //Position of the targeted picture\n    background-position: left 0 bottom x%;\n\n    //Zoom in or out on the position\n    width: x%;\n\n    //Scale height by playing with padding\n    padding-bottom: x%;\n\n    //Set height to 0 because of sprite size\n    height: 0;\n}\n

\n\n

它是如何工作的？\n为了轻松定位任何精灵图片，我们必须将精灵大小指定为原始大小，\xe2\x80\x9c100%\xe2\x80\x9d。然后我们将从相应的底部开始定位图片位置，左为 0。

\n\n

因为精灵大小设置为最大 100%，所以我们必须禁用高度，而现在设置高度的唯一选项是使用 padding-bottom，也以百分比为单位。

\n\n

您的图像现在是完全响应式的，只需使用宽度值（以百分比表示）、放大或缩小，\xe2\x80\x99s 所有，您就拥有了一个完全响应式的 css 精灵。

\n\n

我的博客上的原始文章在这里：http://creativcoders.wordpress.com/2014/05/05/css-responsive-sprites/

\n

Answer 5

这是我发现解决精灵问题的最佳响应示例！

跨浏览器，响应式调整/拉伸CSS Sprite图像

此方法不依赖background-size，因此它将在较旧的浏览器中运行。

弹力精灵

• 本示例使用800宽x 160高的图像。该图像包含6个大小相等的子画面（每个160x160）。

• 如果您的精灵大小不同，则只需更改.sprite的max-width属性即可匹配各个精灵的宽度。

• 设置可见的sprite：将.sprite的左值设置为：0 = 1st sprite -100％= 2nd sprite -200％= 3rd sprite等...容易！

• 如果要使图像拉伸得比其自然尺寸大：将.no-limit类添加到.stretchy。这会从.stretchy中删除max-width：160px，并向.sprite中添加min-height：100％。或者，您可以使用px值（例如300px）设置更大的max-width。

• 间隔图像可以是任何大小，只要它与各个子图形的尺寸成比例即可。