Detaillierte Erklärung der Anwendung von CSS Sprite

CSS Sprite, auch bekannt als CSS Sprite, ist eine Technologie zum Zusammenfügen von Bildern. Bei dieser Methode werden mehrere kleine Symbole und Hintergrundbilder zu einem Bild kombiniert und dann mithilfe der CSS-Hintergrundpositionierung der Teil des Bildes angezeigt, der angezeigt werden muss.

Anwendungsszenarien für Sprite-Bilder

• Statische Bilder ändern sich nicht, wenn sich die Benutzerinformationen ändern.
• Kleine Bilder, kleine Kapazität (2–3 KB).
• Das Bildladevolumen ist relativ groß.

Zweck

Reduzieren Sie die Anzahl der HTTP-Anfragen und beschleunigen Sie die Inhaltsanzeige. Denn bei jeder Anfrage wird eine Verbindung zum Server hergestellt und der Verbindungsaufbau nimmt zusätzliche Zeit in Anspruch.

verwenden

Bevor wir das Sprite-Bild verwenden, müssen wir die Position jedes Symbols im Sprite-Bild kennen.

Aus dem obigen Bild ist die Startposition jedes kleinen Symbols (Icon) im Sprite-Bild leicht zu erkennen. Beispielsweise ist die Startposition des ersten Symbols (Rock) im Sprite-Bild x: 0, y: 0, die Startposition des zweiten Symbols (Schuhe) im Sprite-Bild ist x: 0, y: 50px und die Startposition des dritten Symbols (Fußball) im Sprite-Bild ist x: 0, y: 100px. Analog dazu können wir die Startposition jedes Bildes relativ zum Sprite-Bild ableiten.

Am Beispiel des obigen Sprite-Bildes (die Startpositionen der kleinen Bilder im tatsächlichen Sprite-Bild unterscheiden sich von dem oben angezeigten Bild) wird die Verwendung anhand einer Demo veranschaulicht.

HTML

  <div>
        <ul Klasse="Seitenleiste">
            <li><a href=""><span class="spr-icon icon1"></span>Bekleidung Unterwäsche</a></li>
            <li><a href=""><span class="spr-icon icon2"></span>Schuhe, Taschen und Accessoires</a></li>
            <li><a href=""><span class="spr-icon icon3"></span>Sport und Outdoor</a></li>
            <li><a href=""><span class="spr-icon icon4"></span>Schmuck und Uhren</a></li>
            <li><a href=""><span class="spr-icon icon5"></span>Mobil digital</a></li>
            <li><a href=""><span class="spr-icon icon6"></span>Haushaltsgeräte und Büro</a></li>
            <li><a href=""><span class="spr-icon icon7"></span>Hautpflege und Make-up</a></li>
            <li><a href=""><span class="spr-icon icon8"></span>Produkte für Mutter und Baby</a></li>
        </ul>
    </div>

CSS

ul li {
    Listenstil: keiner;
    Rand: 0;
    Polsterung: 0;
}
A {
    Farbe: #333;
    Textdekoration: keine;
}
.Seitenleiste {
    Breite: 150px;
    Rand: 1px durchgezogen #ddd;
    Hintergrund: #f8f8f8;
    Polsterung: 0 10px;
    Rand: 50px automatisch;
}
.sidebar li {
    Rahmen unten: 1px durchgezogen #eee;
    Höhe: 40px;
    Zeilenhöhe: 40px;
    Textausrichtung: zentriert;
    }
.sidebar li a {Schriftgröße: 18px;}
.sidebar li a:hover {color: #e91e63;}
.sidebar li .spr-icon {
    Anzeige: Block;
    schweben: links;
    Höhe: 24px;
    Breite: 30px;
    Hintergrund: URL (css-sprite.jpg) keine Wiederholung;
    Rand: 8px 0px;}
.sidebar li .icon2 { Hintergrundposition: 0px -24px;}
.sidebar li .icon3 { Hintergrundposition: 0px -48px;}
.sidebar li .icon4 { Hintergrundposition: 0px -72px;}
.sidebar li .icon5 {Hintergrundposition: 0px -96px;}
.sidebar li .icon6 {Hintergrundposition: 0px -120px;}
.sidebar li .icon7 { Hintergrundposition: 0px -144px;}
.sidebar li .icon8 { Hintergrundposition: 0px -168px;}

Warum sind die Eigenschaftswerte der Hintergrundposition bei Verwendung von Sprite-Bildern alle negativ?

Im obigen Beispiel wurde die Verwendung von Sprite-Bildern erläutert. Anfänger könnten jedoch über den negativen Wert der Eigenschaft „Hintergrundposition“ im Sprite-Bild verwirrt sein. Diese Frage ist eigentlich nicht schwer zu beantworten. Wer vorsichtig ist, sollte den Grund für die Verwendung negativer Zahlen schon vor langer Zeit entdeckt haben. Hier verwenden wir die obige Demo als Beispiel, um dieses Problem zu analysieren. Das obige Span-Tag ist ein 24 x 30 Pixel großer Container. Bei Verwendung eines Hintergrundbilds beginnt die Anfangsposition des Hintergrundbilds in der oberen linken Ecke des Containers und deckt den gesamten Container ab. Die Größe des Containers begrenzt jedoch die Größe des Hintergrundbilds, und der Teil außerhalb des Containers wird ausgeblendet. Wenn „background-position: 0 0“ festgelegt ist, bedeutet dies, dass das Hintergrundbild an den Positionen x-axis = 0 und y-axis = 0 relativ zum Container (Span-Tag) als Startposition des Hintergrundbildes angezeigt wird. Wenn Sie also ein zweites Symbol im Container anzeigen müssen, bedeutet dies, dass die X-Achsenrichtung des Sprite-Bildes nach links verschoben werden muss. Das Verschieben des Sprite-Bildes nach links bedeutet, dass sein Wert auf eine negative Zahl gesetzt wird, und dasselbe gilt für die Y-Achsenrichtung.

Produktion

• PS Handbuch Puzzle
• Automatisch generieren mit Sprite-Tools (CssGaga oder CssSprite.exe)

CssSprite Sprite-Tool, Open Source auf GitHub, Adresse: https://github.com/iwangx/sprite

Vor- und Nachteile von Sprite

Vorteil:

1. Beschleunigen Sie das Laden von Webseiten

Für jedes Bild auf der Webseite wird eine Anfrage an den Browser gestellt, das Bild herunterzuladen. Der Browser kann 10 Anfragen gleichzeitig annehmen und zwei Anfragen gleichzeitig verarbeiten.

2. Einfache Wartung

Mit diesem Tool können Sie Bilder direkt zusammenfügen, indem Sie sie auswählen. Natürlich können Sie die Bilder auch selbst verschieben und Ihr Spritesheet gestalten. Beim Ändern von Bildern müssen Sie nur die Position der Bilder ändern. Code direkt generieren, einfach und benutzerfreundlich.

3. CSS Sprites können die Anzahl der Bytes von Bildern reduzieren. Ich habe die Anzahl der Bytes von 3 Bildern, die zu einem Bild kombiniert wurden, oft verglichen und sie ist immer kleiner als die Summe der Bytes dieser 3 Bilder.

4. Es löst das Problem der Webdesigner bei der Benennung von Bildern. Sie müssen nur eine Sammlung von Bildern benennen, ohne jedes kleine Element benennen zu müssen, wodurch die Effizienz der Webseitenerstellung verbessert wird.

5. Es ist praktisch, den Stil zu ändern. Sie müssen nur die Farbe oder den Stil eines oder einiger Bilder ändern, und der Stil der gesamten Webseite kann geändert werden. Es ist bequemer zu warten.

Mangel:

• Beim Zusammenführen von Bildern müssen Sie mehrere Bilder ordentlich und sinnvoll zu einem Bild zusammenführen und dabei genügend Platz lassen, um zu verhindern, dass im Abschnitt unnötiger Hintergrund angezeigt wird. Das ist nicht so schlimm, aber am schmerzhaftesten ist, dass auf der adaptiven Seite unter Breitbild und hochauflösendem Bildschirm der Hintergrund leicht beschädigt wird, wenn Ihr Bild nicht breit genug ist.
• Was die Wartbarkeit betrifft, ist dies im Allgemeinen ein zweischneidiges Schwert. Manchen Leuten gefällt das vielleicht, anderen nicht, denn bei jeder Änderung des Bildes muss man Inhalt aus dem Bild löschen oder hinzufügen, was etwas umständlich erscheint. Und das Berechnen der Position von Bildern (insbesondere von Bildern mit Tausenden von Pixeln) ist auch eine sehr unangenehme Sache. Natürlich können diese unter dem Schlagwort Leistung überwunden werden.
• Da die Position des Bildes auf einen bestimmten absoluten Wert festgelegt werden muss, geht dadurch die Flexibilität, beispielsweise hinsichtlich der Mitte, verloren.

CSS-Sprites können grundsätzlich nur in Boxen fester Größe verwendet werden, sodass die Teile, die nicht sichtbar sein sollen, abgedeckt werden können. Dies bedeutet, dass CSS-Sprites in manchen Situationen nicht geeignet sind, in denen nicht unidirektionale Kachelhintergründe erforderlich sind und eine Skalierung von Webseiten erforderlich ist.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.