sprite - background-size with background-position 不缩放位置？

Question

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

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

我不确定我说的有没有道理。稍微澄清一下:

• 所有元素的样式都是width: 91px;高度:91px；背景大小:100% 自动；。
• 第二张图片的内联样式为 background-position: 0 -91px。
• 当您悬停该元素时，它会获得一个样式 width: 120px; height: 120px; 然后它显示了第二张图片的大部分和第一张图片的一部分，因为定位发生在调整大小之后 =(
• 如果我将背景位置(缩放/悬停后)更改为 0 -120px，它会正确对齐。 (但很明显，当不缩放/悬停时这是错误的。)

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

我一定是遗漏了什么。 CSS 必须比这更聪明。具有背景大小的 Sprite ...这并非不可能，对吧!？

Sprite 的外观取决于我，所以我可以让它有一个 120 * 120 的网格而不是 91 * 91，如果这样更简单的话......

编辑: 以 fiddle 为例:http://jsfiddle.net/rudiedirkx/g4RQx/

智能答案 1: background-position: 0 calc(100%/61 * 2)(61 因为有 62 张图片，2 因为有第 3 张图片)

Answer 1

其实很简单，就是用百分比位置。

background-position: 0 3.28%;

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