Wie skaliert man CSS-Sprites als Hintergrundbilder richtig?

CSS-Sprites als Hintergrundbilder skalieren

Bei der Verwendung von CSS-Sprites als Hintergrundbilder ist es manchmal notwendig, sie auf eine kleinere Größe zu skalieren. Es funktioniert jedoch möglicherweise nicht immer, einfach eine kleinere Höhe und Breite im CSS anzugeben.

Um CSS-Sprites mit der Eigenschaft „Hintergrundgröße“ korrekt zu skalieren, beachten Sie Folgendes:

1. Bestimmen Sie die Abmessungen des Sprite-Bilds:

Überprüfen Sie die Abmessungen des Sprite-Bilds, um es genau zu skalieren. Wenn das Sprite beispielsweise 500 x 400 Pixel groß ist und Sie es um die Hälfte reduzieren möchten, sollten die neuen Abmessungen 250 x 200 Pixel betragen.

2. Geben Sie sowohl Höhe als auch Breite in der Hintergrundgröße an:

Geben Sie beim Definieren der Eigenschaft „Hintergrundgröße“ sowohl die Höhen- als auch die Breitenwerte an. Die Verwendung nur eines Werts führt zu Verzerrungen.

3. Passen Sie die Hintergrundposition an „Offset“ an:

Um den Sprite-Hintergrund zu versetzen, verwenden Sie negative Werte in der Eigenschaft „Hintergrundposition“. Dadurch können Sie nur einen bestimmten Teil des Sprites anzeigen.

Beispiel:

.my-sprite {
    background-image: url("https://i.sstatic.net/lJpW8.png");
    height: 50px;
    width: 50px;
    background-position: 150px 0px;
    background-size: 250px 200px;
    
    border: 1px solid;
}

Das obige ist der detaillierte Inhalt vonWie skaliert man CSS-Sprites als Hintergrundbilder richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!