具有缩放功能的 css3 spritesheet

Question

我在纹理打包器的帮助下生成了一个 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) 以显示 Sprite 表中的背景帧。到目前为止一切都很好。

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

所以我将 background-size:100% 添加到 pirateSlotSprite 中，但是 Sprite 被转移到了不同​​的位置。我想整个图像首先被缩小，然后 background-position:-105px -304px 被应用而不缩放位置值。如果需要，我会分享图片以使问题更容易理解。

关于如何解决这个问题有什么想法吗？

Answer 1

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