Was sind CSS-Sprites und welche Vorteile haben sie?

CSS-Sprites, auch CSS-Sprites genannt, sind eine Methode zur Verarbeitung von Web-Bildern. Dabei handelt es sich um eine Methode zum Kombinieren mehrerer Bilder in einer einzigen Bilddatei zur Verwendung auf der Website. Seine Vorteile sind: 1. Reduzieren Sie HTTP-Anfragen für Webseiten und verbessern Sie die Seitenladegeschwindigkeit. 3. Reduzieren Sie Namensprobleme.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Sprite (Sprite)

CSS-Sprites ist eine Technik zur Leistungsoptimierung, eine Methode zum Kombinieren mehrerer Bilder in einer einzigen Bilddatei zur Verwendung auf einer Website, um die Leistung zu verbessern.

Vorteile

a) Reduzieren Sie die HTTP-Anfrage der Webseite und verbessern Sie die Seitenladegeschwindigkeit

b) Reduzieren Sie die Bytes des Bildes: Die Bytes mehrerer zu einem Bild zusammengeführter Bilder sind kleiner als die Summe der Bytes mehrerer Bilder

c) Reduzierte Benennungsprobleme: Sie müssen nur eine Sammlung von Bildern benennen, und es ist nicht nötig, jedes kleine Element zu benennen, um die Produktionseffizienz zu verbessern

d) Einfache Stiländerung: Sie müssen nur modifizieren das Bild auf einem oder mehreren Bildern. Die Farbe oder der Stil der gesamten Webseite kann geändert werden, was die Wartung komfortabler macht und vernünftige Weise, und Sie müssen auch genügend Platz lassen, um zu verhindern, dass unnötige Hintergründe im Abschnitt vorhanden sind. Das Schlimmste ist jedoch die adaptive Seite unter Breitbild- und hochauflösenden Bildschirmen genug, es ist leicht, dass der Hintergrund kaputt geht.

b) Beim Festlegen des Hintergrunds müssen Sie die genaue Position jeder Hintergrundeinheit ermitteln Normalerweise müssen Sie das zusammengeführte Bild ändern. Am besten fügen Sie einfach das Bild unten hinzu, anstatt vorhandene Bilder zu ändern. Warum Sprites verwenden?

Webseiten enthalten oft mehrere Bilder. Dazu gehören Symbole, Schaltflächen, Logos, zugehörige Bilder und andere Grafiken. Wenn ein Bild auf eine Seite geladen wird, stellt der Browser eine HTTP-Anfrage an den Server. Das Laden jedes einzelnen Bildes erfordert mehrere Aufrufe an den HTTP-Server, was zu langsamen Downloadzeiten und einer hohen Bandbreitennutzung führen kann.

CSS-Sprites kombinieren mehrere Bilder zu einem einzigen Bild, das als Sprite-Blatt oder Collage bezeichnet wird. Anstatt mehrere Dateien herunterzuladen, lädt der Benutzer eine einzelne Datei herunter und zeigt das erforderliche Bild (oder Sprite) über eine Offset-Datei an.

Dies kann die Anzahl der Aufrufe an den Server reduzieren, die Anzahl der zum Rendern von Webseiten erforderlichen Downloads verringern, Bandbreite sparen und die Downloadzeit auf der Clientseite verkürzen sowie die Überlastung des Netzwerks verringern.

Wie verwende ich CSS-Sprites?

Da es sich bei CSS-Sprites um mehrere Bilder handelt, die zu einem einzigen Bild kombiniert werden, werden mehrere Bilder in einem gitterartigen Muster im Sprite-Blatt platziert und zeigen so eine Netzwerkverteilung.

Wenn ein bestimmtes Bild (Sprite-Karte) benötigt wird, wird das Sprite-Blatt im Allgemeinen über das CSS-Attribut „Hintergrundbilder“ referenziert und dann über das CSS-Attribut „Hintergrundposition“ versetzt und positioniert, um die erforderliche Sprite-Karte zu erhalten, und dann in definiert Pixel. Die Größe des Sprites.

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonWas sind CSS-Sprites und welche Vorteile haben sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!