CSS-Sprite passt die Größe kleiner Symbole in großen Bildern an

Lassen Sie uns direkt über die Lösung sprechen:

Angenommen, die Größe eines kombinierten Großbildes beträgt: 900 x 1000 Pixel (wie oben gezeigt)

Jetzt denken Sie darüber nach. Nehmen Sie das Nilpferd-Symbol in der oberen linken Ecke des Bildes und verkleinern Sie die Größe des Symbols.

Normale Bildaufnahme:

.sprite {
background: url('imgs/woqu_localjoin_all.png') no-repeat -21px -80px;
width: 190px;
height: 154px;
}

Nehmen Sie jetzt die halbe normale Symbolgröße:

<pre name="code" class="html">.sprite {
background: url(&#39;all.png&#39;) no-repeat -10px -40px;
width: 95px;
height: 74px;
background-size:450px 500px;
}

OK, Sie sind fertig!

Abschließend empfehle ich Ihnen ein CSS-Sprite-Messtool: http://www.spritecow.com/

Öffnen Sie es und ziehen Sie das zusammengesetzte PNG-Bild hinein: