15

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

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

我不确定我是否有任何意义。稍微澄清一下：

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

一个非常简单的解决方案是使用实际的zoom: 1.3or 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 图像）

4

6 回答 6

14

它实际上很简单，只需使用百分比位置。

background-position: 0 3.28%;

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

于 2013-09-02T17:28:36.310 回答
5

在悬停状态下，根据缩放比例编辑背景位置

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

小提琴

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

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

小提琴

于 2013-09-01T08:37:26.627 回答
3

如果您的要求是比这更平滑的过渡，那么这就是您所需要的。

演示

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;
}

小提琴：小提琴

于 2013-09-06T07:17:39.297 回答
-1

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

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

所以唯一的纯 CCS 方式将是使用同样支持良好的销售转换！

顺便说一句：“精灵的外观取决于我，所以我可以让它有一个 120 * 120 的网格而不是 91 * 91，如果这样更简单的话……”
至少会更好。缩小尺寸总是比放大质量更好！

相反，Javascript 解决方案，尤其是 jQuery，则非常简单，因为您可以使用.index() 函数并轻松计算新的背景位置。

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

于 2013-09-02T15:27:24.073 回答
-1

我觉得答案应该很简单

我已经更新了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;
}

有问题请回复...

于 2013-09-03T06:39:56.257 回答
-1

许多答案建议背景位置中的百分比而不是静态像素，但是我有不同的方法。这有点奇怪......但它有效！<-- 小提琴

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

<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，但解决问题的方法越多越好:)

于 2013-09-03T14:47:49.363 回答