スプライトの特定の領域のサイズを変更する必要があります。元の画像は 800px x 200px です。設定するbackground-position: 200px 0px;とwidth: 100px; height: 25px;、スプライトの正しい部分が得られますが、スプライトのこの部分のサイズを 200px x 50px に変更できるかどうか疑問に思っています。ただしbackground-size: 200px 50px;、関心のある領域だけでなく、スプライト全体のサイズをこのサイズに変更します。
ありがとう！
私は一般的になろうとしているので、フィドルはありません。
いいえ、CSS を使用して画像の一部を拡大縮小することはできません。パーセンテージでテストbackground-sizeしたところ、Chrome のスケーリングが 1:1 ではないことに驚きました。
background-size: 50%背景画像を2倍にしました。200%指数関数的にスケーリングするように見えました。
パーセンテージを使用して、画像を比例してスケーリングすることができます。たとえば、その部分を 200px x 50px に倍増するには、次を使用します。
background-size: 200% 200%;
これにより、背景がコンテナーの幅と高さのそれぞれ 200% にサイズ変更されます。background-positionレイアウトやユースケースによっては、このスケーリング方法に対応するために値を調整する必要がある場合があります。
は、実際にはスプライトで使用するように設計されていないことに注意してくださいbackground-size。そのため、探している結果が得られる場合とそうでない場合があります。