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... */
}

<强> FIDDLE

仅供记录：在您提出的问题中，您提到规模很慢。我尝试使用scale，我没有看到缓慢的转换：

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

<强> FIDDLE

Answer 3

如果您的要求比您需要的更顺利，那么

<强> DEMO
带有居中缩放的
DEMO2 。

<强> HTML：

 Hover image large transition<br>
    Hover that:<br>

    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>

<强> CSS：

 p {
    margin: 0;
    display: inline-block;

}
a {
    display: block;
    border: solid 10px green;
    /* always: */
    width: 91px;
    height: 91px;
    background: black url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;

    /* inline: */
    background-position: 0 -182px;
     -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
a:hover {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

小提琴：fiddle

Answer 4

嗯......，你有几个问题。 ;-)
内联样式在所有方面都“糟糕”。一个是你不能用任何外部CSS覆盖它们（因为它们具有更高的特异性）。所以这就是为什么没有针对您的问题的纯CSS解决方案的原因之一。

另一个原因是，您需要根据实际位置重新计算背景位置，分别在精灵数字上。你不能用CSS做的事情（例如：背景位置：0 calc（nth-child * 91px）;）

所以唯一纯粹的CCS方式是使用销售转换fairly good supported！

顺便说一下：“精灵看起来是由我决定的，所以我可以让它有一个120 * 120的网格而不是91 * 91，如果这样会更简单......”
那至少会更好。降尺度总是比升级更好的质量！

Javascript解决方案，尤其是jQuery相反，因为您可以使用.index() function，因此可以轻松计算新的背景位置。

结论：
目前，没有以这种方式处理CSS精灵的真实/实用解决方案！

Answer 5

我认为答案应该很简单，

我更新了fiddle，

请检查，

如果指定这样的样式，它应该可以轻松解决问题......

a {
 display: block; /* always: */
 width: 91px;
 height: 91px;
 background: black url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
 background-size: 100% auto;
 /* inline: */
 background-position: 0% 3.30%; /* this will do the trick */ 
}
a:hover {
 width: 150px;
 height: 150px;
}

如有任何疑虑，请回复......

Answer 6

许多答案表明背景中的百分比而不是静态像素，但是我有不同的方法。这有点奇怪... but it works!＆lt; - 小提琴

所以我在链接中添加了一个带有附加背景的跨度。而不是你的内联背景位置，而是在跨度上使用高度百分比，如下所示：

<a href="#">
    <span style="height: 100%"></span>
</a>

有了这个css，它就是你所需要的，图像将解决剩下的问题。

a {
    display: block;
    overflow: hidden;
    width: 91px;
    height: 91px;
    position: relative;
}
a span{
    background: url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;
    background-position: 0 0;
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
}
a:hover {
    width: 120px;
    height: 120px;
}

如果你不使用其他解决方案，这是你需要的更多html和css，但解决问题的方法越多越好：）

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

6 个答案: