我有一个62画面91 * 91像素的精灵,这使得整个东西91 * 5642像素.它们显示为一种随着用户/指针移动而增长和缩小的动态网格.有时一个元素(标准91 * 91像素)放大到120 * 120像素.显然,我想让背景增长,整个91 * 91像素的图像显示在整个120 * 120元素中.
输入background-size：100％auto,使宽度总是完美的.现在的问题是,后台位置也希望其值更新！所有62个元素都有内联样式=背景位置等.我无法从内联更新背景位置.我想要的背景首先位置,然后调整大小(缩放),不调整大小,然后放置(缩放到错误的位置).
我不知道我有什么意义有些澄清：
>所有元素的宽度为：91px; height：91px;背景大小：100％自动.
>第二个图像将具有一个内联样式的背景位置：0 -91px.
>当你悬停该元素时,它会获得一个样式宽度：120px; height：120px;然后它显示第二个图像的大部分和第一个的一部分,因为定位发生在调整大小之后=(
>如果我将背景位置(缩放/悬停后)更改为0 -120px,它将正确对齐. (但是当显示不是缩放/悬停时显然是错误的)
一个非常简单的解决方案是使用实际的缩放：1.3或变换：scale(1.3),但这是非常慢的过渡.
我一定是错过了一些东西. CSS必须比这更聪明.具有背景大小的精灵…这不是不可能的！
如何精灵看起来取决于我,所以我可以让它有一个120 * 120的网格,而不是91 * 91,如果这将更简单…
编辑：有例如：http://jsfiddle.net/rudiedirkx/g4RQx/
智能答案1：背景位置：0计算(100％/ 61 * 2)(61因为62张图像,2因为第3张图像)
解决方法
它实际上很简单,只是使用百分比位置.
background-position: 0 3.28%;
