Heim >Web-Frontend >CSS-Tutorial >Wie kann ich CSS-Sprites mithilfe von „background-size' effektiv skalieren?
Wie kann ich CSS-Sprites mithilfe von „background-size' effektiv skalieren?
- DDDOriginal
- 2024-11-19 04:58:02393Durchsuche
CSS-Sprites mit Hintergrundgröße skalieren
Bei der Verwendung von CSS-Sprites als Hintergrundbilder kann die Skalierung auf kleinere Abmessungen ein gewünschtes Ergebnis sein. In diesem Artikel wird erläutert, wie Sprites mit der Eigenschaft „Hintergrundgröße“ effektiv skaliert werden.
Problem: Sprites können nicht skaliert werden
Ein häufiges Problem tritt auf, wenn versucht wird, Sprites auf eine kleinere Größe zu skalieren, was zu Folgendem führt: das vollständige Bild wird anstelle der gewünschten skalierten Version angezeigt.
Lösung Verwendung der Hintergrundgröße
Zum Skalieren Bei Sprites ist es wichtig, auf die Abmessungen des Sprite-Bildes zu achten. In Ihrem Beispiel:
Wenn das Hintergrundbild auf „https://i.sstatic.net/lJpW8.png“ eingestellt ist, beträgt die Bildgröße 500 x 400.
Um es auf die Hälfte zu skalieren, definieren Sie die neuen Abmessungen in der Eigenschaft „Hintergrundgröße“:
`
Hintergrundgröße: 250px 200px;
...
Dadurch wird die Breite und Höhe des Sprites auf 250px bzw. 200px reduziert.
Anpassen der Hintergrundposition
Zusätzlich, um ein bestimmtes Symbol anzuvisieren und anzuzeigen Passen Sie innerhalb des Sprites die Eigenschaft „Hintergrundposition“ an. Um beispielsweise das Symbol bei -200px 0px im Originalbild in voller Größe anzuzeigen, würde Folgendes ausreichen:
`
background-position: 150px 0px;
...
Denken Sie daran, dass der Verschiebungsabstand für die Hintergrundposition halbiert wird da das Sprite auf die Hälfte seiner ursprünglichen Größe skaliert wird. Dadurch wird sichergestellt, dass das gewünschte Symbol angezeigt wird.
Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Sprites mithilfe von „background-size' effektiv skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!