Question

我在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和backgroundps应用于div（sav bgDiv）以显示精灵表中的背景帧。到目前为止，一切都很好。

当浏览器调整大小时，

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

所以我将background-size:100%添加到pirateSlotSprite，但精灵会转移到其他位置。我猜整个图像先缩小，然后应用background-position:-105px -304px而不调整位置值。如果需要，我将分享图片以使问题更容易理解。

有关如何解决此问题的任何想法？

Answer 1

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

带缩放的css3 spritesheet

1 个答案: