ウェブページのスプライト画像を縮尺する

Question

私はウェブページを持っています。このWebページは、sprites.pngというイメージファイルを参照します。このファイルには、すべての画像が1つのファイルに格納されています。このファイルの横には、48ピクセルx 48ピクセルのイメージがあります。

<div class="cell-back"> 
    <div class="play"></div> 
</div> 

あなたが想像できるように、「再生」スプライトが実際のスペースよりも大きくなっている：私は、持っている、私のWebページで

.cell-back { 
    height:36px; 
    width:36px; 
    border-radius:18px; 
    background-color:green; 
} 

.play { 
    width:48px; 
    height:48px; 
    background: url('/img/sprites.png') -437px 234px; 
} 

：私はこのように私のCSSでそれを参照しています。私は本当に "再生"画像が24px x 24pxのセルバックを中心にしたいと思っています。しかし、私はスプライト画像をどのように縮小するかを理解していません。

これを行う方法はありますか？

ありがとうございました！

Answer 1

background-sizeを追加する必要があります。この方法で、表示された画像を拡大/縮小できます。

.play { 
    width: 48px; 
    height: 48px; 
    background-image: url('/img/sprites.png'); 
    background-position: -437px 234px; 
    background-size: 24px 24px; 
}