Wie kann ich CSS-Sprites mithilfe von „background-size' auf die Hälfte ihrer Größe skalieren?

CSS-Sprites mithilfe der Hintergrundgröße skalieren

Sprites sind eine Technik, mit der mehrere Bilder zu einem einzigen Bild kombiniert werden, um die Website-Leistung zu verbessern. Wenn Sie Sprites als Hintergrundbilder verwenden, kann es jedoch zu Herausforderungen bei der Skalierung auf die gewünschten Abmessungen kommen.

Herausforderung:

In diesem speziellen Szenario besteht das Ziel in der Skalierung ein 100 x 100 Pixel großes Sprite mithilfe der Eigenschaft „Hintergrundgröße“ auf die Hälfte seiner Größe reduzieren. Der aktuelle Code führt dazu, dass das Bild in voller Größe angezeigt wird.

Lösung:

Um dieses Problem zu beheben, müssen Sie die Dimension des Sprite-Bildes definieren. Da das Sprite in diesem Fall 500 x 400 Pixel groß ist, können Sie es um die Hälfte reduzieren, indem Sie die Hintergrundgröße auf 250 x 200 Pixel festlegen. Passen Sie außerdem die Hintergrundposition an, um das gewünschte Symbol zu erhalten.

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; /* for testing */
}

<div class="my-sprite"></div>

Mit diesen Anpassungen wird das Sprite verkleinert die Hälfte seiner Originalgröße, was zu einem 50 x 50 Pixel großen Bild führt. Der Hintergrundpositionswert von 150px 0px stellt sicher, dass das gewünschte Symbol innerhalb des Sprites sichtbar ist.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Sprites mithilfe von „background-size' auf die Hälfte ihrer Größe skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!