sprite - 带有background-position的background-size不能缩放位置吗？

我有一个由91 * 91px的62张图片组成的图片，整个图片为91 * 5642 px。它们以动态网格的形式显示，该网格根据用户/指针的移动而增长和收缩。有时，某个元素(标准91 * 91像素)会放大以使其变为120 * 120像素。显然，我希望背景随其增长，以便在整个120 * 120元素中显示整个91 * 91 px图像。

输入background-size: 100% auto以使宽度始终完美。现在的问题是background-position期望其值也要更新!所有62个元素都有内联style=background-position etc。我无法从内联更新背景位置。我希望背景先定位然后再调整大小(缩放)，而不是先调整然后再定位(缩放到错误的位置)。

我不确定我在说什么。为了澄清一下:

所有元素都具有width: 91px; height: 91px; background-size: 100% auto;样式。

第二个图像将具有background-position: 0 -91px的内联样式。

当您将鼠标悬停在该元素上时，它会得到样式width: 120px; height: 120px;，然后显示第二张图片的大部分和第一张图片的一部分，因为在调整大小=(

如果将背景位置(缩放/悬停后)更改为0 -120px，它将正确对齐。 (但显然，不缩放/悬停时是错误的。)

一个非常简单的解决方案是使用实际的zoom: 1.3或transform: scale(1.3)，但是过渡非常慢。

我肯定错过了什么。 CSS必须比这更聪明。一个具有背景大小的精灵……这不是不可能!!

Sprite的外观取决于我，因此我可以使其具有120 * 120的栅格，而不是91 * 91的栅格，如果那样会更简单...

编辑:，例如小提琴:http://jsfiddle.net/rudiedirkx/g4RQx/

聪明答案1: background-position: 0 calc(100% / 61 * 2)(61表示62幅图像，2表示第3幅图像)

最佳答案

实际上非常简单，只需使用百分比位置即可。

background-position: 0 3.28%;

http://jsfiddle.net/g4RQx/18/

关于sprite - 带有background-position的background-size不能缩放位置吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17033806/