Was ist CSS-Sprite? Zusammenfassung der CSS-Sprite-Fähigkeiten

Css-Sprite muss als Front-End-Mitarbeiter beherrscht werden, aber dies ist für Studenten, die gerade lernen, schwierig. Wenn der Inhalt nicht angezeigt wird, wird dies nicht der Fall sein umfassend, Sie können es in meinem persönlichen Blog nachlesen

CSS-Sprites werden von vielen Menschen in China CSS-Sprites genannt und 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. Bei der derzeit gängigen Netzwerkgeschwindigkeit ist die Ladezeit für ein einzelnes Bild, das 200 KB nicht überschreitet, grundsätzlich gleich, sodass Sie sich über dieses Problem keine Sorgen machen müssen. Der Schlüssel zur Beschleunigung liegt nicht in der Gewichtsreduzierung, sondern in der Reduzierung der Stückzahl. Beim herkömmlichen Bildschneiden wird auf Präzision geachtet. Je kleiner die Bildgröße, desto besser. Tatsächlich spielt die Größe keine Rolle. Computer werden alle in Bytes berechnet. Jedes Mal, wenn der Client ein Bild anzeigt, sendet er eine Anfrage an den Server. Je mehr Bilder vorhanden sind, desto mehr Anfragen gibt es und desto größer ist die Möglichkeit von Verzögerungen.

CSS Sprites integriert tatsächlich einige Hintergrundbilder auf der Webseite in eine Bilddatei und verwendet dann die Kombination aus CSS „background-image“, „background-repeat“ und „background-position“ für die Hintergrundpositionierung. Hintergrundposition kann Zahlen verwenden, um die Position des Hintergrundbilds genau zu lokalisieren.

Im Folgenden werde ich die Verwendungstechniken im Detail erläutern, die Ihnen ein klares und neues Verständnis von Kinderschuhen vermitteln, die Sie derzeit nicht verstehen, aber Sie müssen die Prinzipien dennoch verstehen und Techniken zuerst. Es wird die Positionierung auch sehr schnell abschließen, wenn Sie es sexuell machen. Ich werde unten einen Fall teilen.

Lassen Sie mich zunächst erklären, dass die zu positionierenden Hintergründe alle in einem Bild zusammengefasst sind und daher alle eine Einheitsgröße haben. Entweder sind die X-Achsen-Koordinaten gleich oder die Die Koordinaten der Y-Achse sind gleich. Es gibt zwei Typen, die unten beschrieben werden.

1. Horizontale Positionierungskoordinaten

Horizontale Positionierungskoordinaten bedeuten, dass die Y-Achsenkoordinate fest ist. Ihr Merkmal ist, dass die Höhe jedes Symbols konsistent ist und der Hintergrund durch Ändern der Position der X-Koordinate geändert wird. Messen Sie einfach die Breite jedes Symbols, um die x-Achsenkoordinate zu ermitteln. Wenn Sie diese Regel noch nicht kennen, erkläre ich sie Ihnen im Folgenden anhand zweier Fälle, die ich gemacht habe.

Lassen Sie uns die Positionierung im Detail erklären. Hier ändern wir die X-Koordinate in Position.

Da die Höhen gleich sind, sind die Koordinaten auf der Y-Achse alle 0 oder oben

Ich verwende hier eine Spanne als Hintergrund für jedes Symbol. Lassen Sie uns den Code im Detail analysieren:

<div class="join c">
            <strong>Join us on:</strong>
            <ul class="c">
                <li><a href="https://www.facebook.com/Fancyladies"><span class="sl">Facebook</span><span class="sharelogo facebookLogo"></span></a></li>
                <li><a href="http://pinterest.com/fancyladies/ "><span class="sl">Pinterest</span><span class="sharelogo pinterestLogo"></span></a></li>
                <li><a href="https://twitter.com/fancyladiescorp"><span class="sl">Twitter</span><span class="sharelogo twitterLogo"></span></a></li>
                <li><a href="http://www.flickr.com/photos/fancyladies"><span class="sl">flickr</span><span  class="sharelogo flickrLogo"></span></a></li>
                <li><a href="http://www.youtube.com/user/fancyladiescom"><span class="sl">Youtube</span><span class="sharelogo youtubeLogo"></span></a></li>
                <li><a href="http://www.fancyladies.com/blog/"><span class="sl">Blog</span><span class="sharelogo blogLogo"></span></a></li>
            </ul>
        </div>

Das Folgende ist der CSS-Code:

.sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}
 
.facebookLogo{background-position:0 0;width:20px;}
 
.pinterestLogo{background-position:-20px 0;width:42px;}
 
.twitterLogo{background-position:-62px 0;width:30px;}/**/
 
.flickrLogo{background-position:-92px 0;width:130px;}
 
.youtubeLogo{background-position:-222px 0;width:98px}
 
.blogLogo{background-position:-320px 0;width:84px;}
 
.sl{float:left;padding-right:10px;}

Ihre Hintergrundbilder haben alle diesen Hintergrund gemeinsam: background-image:url(../images/shareIcon.jpg);

Der Hintergrund jedes Elements darf nicht wiederholt werden: Das heißt: Hintergrundwiederholung: keine Wiederholung;

Nachdem Sie dies gelesen haben, finden Sie eine Regel, dh die Koordinaten von Jedes Element entspricht den Koordinaten des vorherigen Elementwerts plus Breite. Das heißt, die Formel für den horizontalen Koordinatenwert des Elements ist gleich. Der Koordinatenwert des angrenzenden Elements plus der Breite.

Der Wert von pinterestLogo entspricht dem Koordinatenwert von facebookLogo 20px + der Breite von facebookLogo 20px. Ist es nicht sehr einfach, solange Sie die Breite des Elements kennen, da die horizontalen Koordinaten sein müssen eine feste Breite gegeben, so dass das Messen der Breite in einem Schritt keine Zeitverschwendung ist. Ich hoffe, dass ich mir das Muster der Koordinatenwerte im Quellcode genauer ansehen kann.

Egal ob horizontal oder vertikal, ihre Startposition ist Hintergrundposition: 0 0, während bei horizontaler Positionierung die Höhe festgelegt ist, sodass Sie nur die X-Koordinate jedes Mal ändern müssen Der Wert wird realisiert .

Zum Beispiel ist das Facebook-Logo das Symbol der Startposition, daher ist sein Koordinatenwert 0,0, was seine Positionierung verwirklicht.

Dann ist das Pinterest-Logo das darunter liegende, das sich aus dem negativen Wert der Breite von Facebook errechnet. Da die Breite von Facebook 21 Pixel beträgt, lauten die Koordinaten des Pinterest-Logos „background-position:-20px 0“ usw >

Breite, Sie können die Koordinatenposition von TwitterLogo erhalten. Das heißt -(20px+42px)=-62px; das heißt, der Koordinatenwert von twitterLogo ist.twitterLogo{background-position:-62px 0;width:30px;}

Nachdem Sie dies gelesen haben, haben Sie es herausgefunden ein Muster, das heißt alle Die Koordinaten eines benachbarten Elements sind gleich dem Koordinatenwert des vorhergehenden Elements plus der Breite des vorhergehenden Elements. Das heißt, der horizontale Koordinatenwert des Elements ist gleich. Der Koordinatenwert des angrenzenden Elements plus seiner Breite. Okay, lass uns über die zweite Option sprechen.

2. Vertikale Positionierungskoordinaten

Längspositionierungskoordinaten bedeuten, dass die X-Achsen-Koordinate festgelegt ist und der Y-Achsen-Koordinatenwert geändert wird, um den Hintergrund zu ändern ihre X-Achsen-Koordinate ist immer gleich, 0 oder links. Lassen Sie mich unten einen Fall teilen:

3. Wenn Breite und Höhe gleich sind, ist das das Beste. Ich vertraue Ihren mathematischen Fähigkeiten. Ich habe die dritte Klasse der Grundschule bestanden, OK, lassen Sie mich davon erzählen.

1. Wenn Breite und Höhe gleich sein sollen, sind die Koordinaten der X-Achse gleich. Diese Situation tritt normalerweise unter einer Gruppe von Schaltflächen auf und der Hintergrund ändert sich, wenn die Maus darüber bewegt wird. Ich habe diese Situation auch zusammengefasst:

X-Achsenkoordinate =-n (Startposition + Breite).

wobei der n-Wert bei 0 beginnt. Das heißt, die Koordinaten aller Startpositionen sind 0, beginnend bei 0. Das Folgende ist analog.

Zum Beispiel ist das Element, das Sie jetzt positionieren möchten, das dritte. Nehmen Sie an, dass die Breite unseres Symbols hier 30 Pixel beträgt. Dann ist seine X-Achsen-Koordinate gleich. x=-3*(0+30px);

Y-Achsenkoordinate =-n (Startposition + Höhe)

Zum Beispiel ist das Symbol, das Sie jetzt positionieren möchten, die 6. Position , Angenommen, die Höhe beträgt hier auch 32px; dann ist die Y-Achsen-Koordinate

Y=-6 (0+32px) =-192px. Haha, es gibt natürlich viele Werkzeuge, das Werkzeug namens Gaga Ziemlich gut, aber ich habe es noch nie benutzt. Ich finde es in der Praxis sehr praktisch, deshalb möchte ich es teilen.

Das obige ist der detaillierte Inhalt vonWas ist CSS-Sprite? Zusammenfassung der CSS-Sprite-Fähigkeiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!