Wie kann ich CSS-Sprites mithilfe der Eigenschaft „background-size' skalieren?

CSS-Sprites mithilfe der Eigenschaft „Background-Size“ skalieren

Bei der Verwendung von CSS-Sprites als Hintergrundbild für ein Element kann es zu Situationen kommen, in denen Sie Sie müssen das Sprite auf eine kleinere Dimension verkleinern. Die Eigenschaft „Hintergrundgröße“ bietet eine Lösung, um diese Skalierung mühelos zu erreichen.

Um ein CSS-Sprite zu skalieren, definieren Sie einfach die Eigenschaft „Hintergrundgröße“ für das Element, das das Sprite enthält. Der Wert, den Sie für die Hintergrundgröße festlegen, bestimmt die skalierte Größe des Sprites. Wenn Sie beispielsweise die Sprite-Größe um die Hälfte reduzieren möchten, stellen Sie die Hintergrundgröße auf die Hälfte der ursprünglichen Breite und Höhe des Sprites ein.

Im bereitgestellten Beispiel hat das Sprite eine Abmessung von 100 x 100 Pixel. Um das Sprite auf die Hälfte seiner Größe zu skalieren, ändern Sie die Eigenschaft „Hintergrundgröße“ wie folgt:

.my-sprite {
  background-size: 50px 50px;
}

Denken Sie daran, die Eigenschaft „Hintergrundposition“ entsprechend anzupassen, um auf das gewünschte Symbol im Sprite-Blatt zuzugreifen. Durch Verkleinern des Sprites können Sie eine kleinere Version des Bildes anzeigen, ohne dass Details verloren gehen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Sprites mithilfe der Eigenschaft „background-size' skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!