带有背景位置的背景大小不会缩放位置？答案

【问题标题】：background-size with background-position doesn't scale the position?带有背景位置的背景大小不会缩放位置？
【发布时间】：2013-06-06 16:40:18
【问题描述】：

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

输入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 张图片）

【问题讨论】：

SASS 或 LESS CSS 预处理可能有助于简化此操作
在很多情况下使用精灵表有很多好处，但在这种情况下使用单个图像会省去很多麻烦。您需要使用精灵表有什么特别的原因吗？
@DevinCrossman 我不这么认为。只有制作精灵更容易。预处理器在 CSS 上没有改进。如果在 CSS 中无法实现，那么预处理器就无法实现。
@3rror404 62 张图片...这需要一个精灵 IMO。
查看这个问题的答案stackoverflow.com/questions/2430206/… 可能是一个可能的解决方案？

标签： sprite background-position css

【解决方案1】：

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

background-position: 0 3.28%;

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

【讨论】：

@Rudie 如果您采用这种方法，我建议为您的图像添加足够的长度（即使只是空白空间）以允许简单的百分比 - 即使其长度为 100 * 91px，并且您的数字很容易而不是圆角。
很好的答案！这应该得到赏金。
非常感谢@Dom。真实的事实马修，最好有四舍五入的数字，这样你就不会得到一个外星像素线。
更好：background-position: 0 -webkit-calc(100% / 62 * 0) jsfiddle.net/rudiedirkx/g4RQx
所有的，@rafaelcastrocouto。谢谢！

【解决方案2】：

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

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

FIDDLE

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

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

FIDDLE

【讨论】：

这个问题是位置部分是内联的并且每个图像都设置，这就是为什么你需要每个<a>元素设置背景位置。
或者 - 我应该说至少我是这么理解的。
是的，马修，你明白了。我在 CSS 中需要 62 个不同的 :hover 状态。不可接受。
@Danield 我会再试一次scale()。一年前很慢。
这应该是正确的做法！这很好用！

【解决方案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

【讨论】：

我建议你添加 translate3d()。这样您就可以使用 GPU 加速。来源：mobile.smashingmagazine.com/2012/06/21/…
我正在寻找没有scale() 的答案。这不需要background-position 解决方案。

【解决方案4】：

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

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

所以唯一的纯 CCS 方式将使用同样fairly good supported 的销售转换！

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

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

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

【讨论】：

您/客户可以使用!important 覆盖内联样式。我不能使用 jQuery 的 .index() 因为元素顺序不是精灵顺序。所有源图像都是 91*91 =( 所以保存为 120 不是很有用。transform: scale 确实是最简单的，但我的性能很差。（最后一次尝试效果很好。）我主要是在寻找明亮的新想法。有吗？
好的，!important 是可能的（我个人从不使用它），但如前所述，它无济于事，因为 AFAIK 没有 CSS 解决方案。关于 JS 的事情......，如果元素顺序不是精灵顺序，你也可以使用背景图像的当前坐标来计算新的。“我主要是在寻找新的想法。有吗？”不，真的不是！因为恕我直言，使用一个图形（而不是 60 个或更多）是有意义的。不幸的是，没有其他方法可以使用 CSS 实现您的目标。
源图像为 91*91，构成 1 个精灵。我的意思是。同意transform: scale。可能为什么它也被发明了=）也许zoom: 1.3也可以工作......但利润率为负......哦，会尝试的。

【解决方案5】：

许多答案建议背景位置中的百分比而不是静态像素，但是我有不同的方法。有点奇怪...but it works!

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

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

【讨论】：

这很聪明！如果我只有 ~ 10 个图块，那将是完全可以接受的，但我有 62 个并且还在增长，所以这将是巨大的 <span>s 并且渲染非常昂贵，即使它们只是部分可见。不过这很聪明 =) 我喜欢。

【解决方案6】：

我觉得答案应该很简单，

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

如有疑问请回复...

【讨论】：