Scaling Down Sprite Bilder auf Webseiten

Question

Ich habe eine Webseite. Diese Webseiten verweisen auf eine Bilddatei namens sprites.png. Diese Datei enthält alle Bilder in einer Datei. In der Seite dieser Datei habe ich ein Bild, das 48px x 48px ist; Ich Referenzierung es in meinem css wie folgt aus:

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

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

In meiner Web-Seite habe ich dann haben:

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

Wie Sie sich vorstellen können, das „Spiel“ Sprite größer ist als der tatsächlich Raum . Ich würde wirklich gerne für das "play" Bild 24px x 24px zentriert innerhalb Cell-Back sein. Aber ich habe nicht herausgefunden, wie ich mein Sprite-Bild verkleinern kann.

Gibt es eine Möglichkeit, das zu tun?

Vielen Dank!

Answer 1

Sie müssen background-size hinzufügen. Auf diese Weise können Sie das angezeigte Bild skalieren.

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