1

我在 Texture Packer 的帮助下生成了一个 CSS Spritesheet，它看起来像

.pirateSlotSprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(../img/pirateSlotSprite.png);}
.backgroundps {width:800px; height:480px; background-position: -105px -304px}
.balanceBlockps {width:122px; height:61px; background-position: -0px -0px}

...more classes for each frame...

.lineControlps {width:113px; height:65px; background-position: -580px -0px}
.maxBetButtonps {width:115px; height:64px; background-position: -348px -0px}

然后我将类应用pirateSlotSprite到backgroundpsdiv (sav bgDiv) 以显示精灵表中的背景帧。到目前为止一切都很好。

bgDiv将在浏览器调整大小时调整大小，但背景图片保持静态而不会缩小/放大以适合 bgDiv。

所以我添加background-size:100%到pirateSlotSprite，但精灵被转移到不同的位置。我猜整个图像首先被缩小，然后background-position:-105px -304px在没有缩放位置值的情况下被应用。如果需要，我将分享图片以使问题更易于理解。

有想法该怎么解决这个吗？

4

1 回答 1

0

您误解了背景图像的工作方式。背景图像的定位使用像素或百分比。但是图像本身会以其真实的分辨率和纵横比显示（除非被 JavaScript 更改）。因此，当您调整浏览器窗口大小时，它们不会“缩放/拉伸”。

于 2012-06-29T08:11:03.007 回答