1

テクスチャパッカーを使用してCSSスプライトシートを生成しました。

.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 に答える