背景位置的背景大小不会缩放位置？

Question

我有一张62张91*91像素的精灵,这使得整件事情为91*5642像素.它们以动态网格的形式显示,根据用户/指针的移动而增长和缩小.有时一个元素(标准91*91像素)放大使其为120*120像素.显然,我希望背景增长,以便在整个120*120元素中显示整个91*91像素图像.

输入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必须比这更聪明.一个背景大小的精灵......这不是不可能的!？

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

编辑:用例子小提琴: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/

Answer 2

在悬停状态下,根据比例编辑您的背景位置

a:hover {
    width: 120px;
    height: 120px;
    background-position: 0 -240px; /* -182px * 1.3186... */
}

小提琴

只是为了记录:在你的问题中,你提到规模很慢.我尝试使用scale,我没有看到缓慢的转换:

a:hover {
    transform: scale(1.3);
    transform-origin: 0 0;
    transition: all .5s;
}

小提琴