Wie verwende ich CSS-Sprites?

CSS-Sprites werden von vielen Menschen in China als CSS-Sprites bezeichnet. Sie sind eine Methode zur Verarbeitung von Web-Bildern. Es ermöglicht Ihnen, alle verstreuten Bilder einer Seite in einem großen Bild zusammenzufassen, sodass beim Zugriff auf die Seite nicht wie zuvor die geladenen Bilder einzeln angezeigt werden.

So verwenden Sie CSS

CSS Sprites integrieren tatsächlich einige Hintergrundbilder auf der Webseite in eine Bilddatei. und verwenden Sie dann die CSS-Kombination „Hintergrundbild“, „Hintergrundwiederholung“ und „Hintergrundposition“, um den Hintergrund zu positionieren. Hintergrundposition kann Zahlen verwenden, um die Position des Hintergrundbilds genau zu lokalisieren.

Beim Webseitenzugriff sendet der Client jedes Mal, wenn er auf ein Bild zugreifen muss, eine Anfrage an den Server. Daher gilt: Je mehr Bilder aufgerufen werden, desto mehr Anfragen werden gestellt und desto größer ist die Wahrscheinlichkeit Verzögerung. .

Daher liegt der Schlüssel zur Beschleunigung der CSS-Sprites-Technologie nicht in der Verringerung der Qualität, sondern in der Reduzierung der Anzahl. Der damit einhergehende Anstieg des Speicherverbrauchs, die umständliche Synthese von CSS-Sprites-Bildern und andere Mängel werden sich natürlich nicht verbessern Die Leistung der Website reicht nicht mehr aus.

CSS-Sprites Anwendungsbereich:

1, die Webseitenbeschleunigung muss abgeschlossen werden, indem die Anzahl der HTTP-Anfragen reduziert wird.

2. Die Webseite enthält eine große Anzahl kleiner Symbole. Alternativ sind einige Symbole sehr vielseitig.

3. Es gibt Bilder auf der Webseite, die vorab geladen werden müssen. Hauptsächlich die Beziehung zwischen a und a:hover Hintergrundbild. Wenn die Hintergrundbilder von a und a:hover separat geladen werden, bewegt sich die Maus des Benutzers über eine Schaltfläche, und der Hintergrund der Schaltfläche verschwindet plötzlich und kommt dann wieder zurück, was zu einem „Flackern“ führt, wenn die Textfarbe der Schaltfläche gleich oder ähnlich ist in den Hintergrund rücken. Noch peinlicher ist, dass es den Menschen die Illusion vermitteln kann, dass der Knopf „verschwunden“ ist.

Bedingungen, die erfüllt sein müssen

Im Webdesign ist es am besten, eine Regel für die Bilder zu haben, die durch diese Technologie zusammengestellt werden. Feste Breite oder Höhe. Am besten ist es, wenn Breite und Höhe festgelegt werden können. Bilder, die gekachelt werden müssen, sind offensichtlich nicht für Sprites geeignet.

Die Schaltflächen im Bild oben haben eine feste Breite und eine feste Höhe.

Wenn die Breite festgelegt ist, können mehrere kleine Bilder parallel angeordnet werden. Bei fester Höhe werden die kleinen Bilder vertikal angeordnet.

Wenn die Verwendung der CSS-Sprites-Technologie erzwungen wird, wenn der Hintergrund weder eine feste Breite noch eine feste Höhe hat, kann es leicht zu einem Zustand kommen, in dem „Bilder, die nicht erscheinen sollten, auf der Seite erscheinen“. Wenn es „erzwungen wird, die Höhe einzustellen“, wird es sich auch sehr nachteilig auf die zukünftige Wartung auswirken.

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